Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

fix: font.css not auto-generated from spectrum-css #319

Merged
merged 3 commits into from
Dec 2, 2019
Merged

fix: font.css not auto-generated from spectrum-css #319

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b2b9abd
fix: font.css not auto-generated from spectrum-css
adixon-adobe Nov 26, 2019
a503913
fix: swap the order here so the variables are defined first
adixon-adobe Nov 26, 2019
547f00d
fix: code review feedback
adixon-adobe Dec 2, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 96 additions & 31 deletions packages/styles/fonts.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,46 +10,111 @@ 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);

--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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we upstream an issue to get this removed at the Spectrum CSS level?

--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-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-ar: 'adobe-arabic', 'myriad-arabic',
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-he: 'adobe-hebrew',
var(--spectrum-font-fallbacks-sans);
--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);
}

/*
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 */
1 change: 1 addition & 0 deletions packages/styles/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
Expand Down
130 changes: 97 additions & 33 deletions scripts/spectrum-vars.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,47 +20,68 @@ const license = fs.readFileSync(
path.join(__dirname, '..', 'config', 'license.js')
);

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 =
identifier == ':root ' ? identifier : `.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,
.spectrum--dark,
.spectrum--light,
.spectrum--lightest`,
shadowSelector
);
}

return result;
};
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

put the guts of processCSS here so I could re-use.


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) {
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,
.spectrum--large`,
shadowSelector
);
result = result.replace(
`.spectrum--darkest,
.spectrum--dark,
.spectrum--light,
.spectrum--lightest`,
shadowSelector
);
}
let result = processCSSData(data, identifier);
writeProcessedCSSToFile(dstPath, result);
});
};

result = `${license}\n/* stylelint-disable */\n${result}\n/* stylelint-enable */`;
// For fonts.css we need to combine 2 source files into 1
const processMultiSourceCSS = (srcPaths, dstPath, identifier) => {
let result = '';

fs.writeFile(dstPath, result, 'utf8');
});
for (const srcPath of srcPaths) {
let data = fs.readFileSync(srcPath, 'utf8');
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just did readFileSync here to keep things simple.

result = `${result}\n${processCSSData(data, identifier)}`;
}

writeProcessedCSSToFile(dstPath, result);
};

// where is spectrum-css?
Expand Down Expand Up @@ -126,6 +147,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(commonsPath, 'fonts.css');
const srcPath2 = path.join(typographyPath, 'font.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, ':root ')
);
}
}

Promise.all(processes).then(() => {
console.log('complete.');
});
5 changes: 5 additions & 0 deletions yarn.lock
View file
Open in desktop
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