Skip to content

Commit

Permalink
⚡ initial release
Browse files Browse the repository at this point in the history
  • Loading branch information
@andriytyurnikov
andriytyurnikov committed Mar 1, 2024
1 parent 4826c91 commit 3256ae6
Show file tree
Hide file tree
Showing 3 changed files with 159 additions and 37 deletions.
73 changes: 65 additions & 8 deletions index.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,70 @@
const plugin = require('tailwindcss/plugin')

import {
computeCapHeightScale,
computeXHeightScale,
computeBaseLineTrimFactor,
computeCapHeightTrimFactor,
computeLineHeightScale,
round
} from "./utils.js"
function round(value) {
return parseFloat(value.toFixed(4)).toString()
}

const computeCapHeightScale = (metrics) => {
return metrics.capHeight
/
metrics.unitsPerEm
}

const computeLineHeightScale = (metrics) => {
return _contentArea(metrics)
/
metrics.unitsPerEm
}

const computeCapHeightTrimFactor = (metrics) => {
return _ascentScale(metrics)
-
_capHeightScale(metrics)
+
(_lineGapScale(metrics) / 2 )
}

_ascentScale = (metrics) => {
return metrics.ascent
/
metrics.unitsPerEm
}

_capHeightScale = (metrics) => {
return metrics.capHeight
/
metrics.unitsPerEm
}

const computeBaseLineTrimFactor = (metrics) => {
return _absoluteDescentScale(metrics)
+
(_lineGapScale(metrics) / 2)
}

const _absoluteDescentScale = (metrics) => {
return _absoluteDescent(metrics)
/
metrics.unitsPerEm
}

const _absoluteDescent = (metrics) => {
return Math.abs( metrics.descent )
}

const _lineGapScale = (metrics) => {
return metrics.lineGap
/
metrics.unitsPerEm
}

const _contentArea = (metrics) => {
return metrics.ascent
+
metrics.lineGap
+
_absoluteDescent(metrics)
}

module.exports =
// prefix: 'metrica-',
Expand Down
7 changes: 4 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"version": "0.0.2",
"description": "Text capsizing and whitespace trimming",
"main": "index.js",
"type": "module",
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix",
Expand All @@ -19,12 +20,12 @@
},
"repository": {
"type": "git",
"url": "git+https://github.com/andriytyurnikov/rubakas-metrica-typus.git"
"url": "git+https://github.com/rubakas/metrica-typus.git"
},
"bugs": {
"url": "https://github.com/andriytyurnikov/rubakas-metrica-typus/issues"
"url": "https://github.com/rubakas/metrica-typus/issues"
},
"homepage": "https://github.com/andriytyurnikov/rubakas-metrica-typus#readme",
"homepage": "https://github.com/rubakas/metrica-typus#readme",
"keywords": [
"create-tailwind-plugin",
"tailwind-css-plugin",
Expand Down
116 changes: 90 additions & 26 deletions test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,47 +12,111 @@ expect.extend({
function generatePluginCss(overrides) {
const config = {
theme: {
// Default options for your plugin.
// rubakasMediaResponsum: {
// YOUR_PLUGIN_CUSTOM_OPTION: false,
// },
fontFamily: {
'berkeley-mono': [
'Berkeley Mono Variable',
'sans-serif'
],
},
fontMetrics: {
'berkeley-mono': {
capHeight: 680,
ascent: 956,
descent: -244,
lineGap: 0,
unitsPerEm: 1000,
xHeight: 522,
xWidthAvg: 600
},
}
},
corePlugins: true,
plugins: [customPlugin],
};

return postcss(tailwindcss(merge(config, overrides)))
.process('html { @apply visible tablet:invisible laptop:visible desktop:invisible desktop-4k:visible }', {
.process('div { @apply metrica-font-berkeley-mono metrica-capsize-rem-[3/2] metrica-leading-rem-[4] metrica-trim; }', {
from: `${path.resolve(__filename)}`,
})
.then(({ css }) => css);
}

test('utility classes can be generated', () => {
return generatePluginCss().then(css => {
expect(css).toMatchCss(`
html {
visibility: visible
}
@media (min-width: 507px) and (min-height: 507px) {
html {
visibility: hidden
}
expect(css).toMatchCss(`
div {
--metrica-cap-height-trim: calc(
(
( var(--metrica-precomputed-cap-height-trim-factor) )
-
(
(
(
var(--metrica-precomputed-line-height-scale)
*
var(--metrica-font-size-scale)
)
-
( var(--metrica-line-height-unitless) )
)
/
2
/
( var(--metrica-font-size-scale) )
)
)
*
(-1)
);
--metrica-baseline-trim: calc(
(
( var(--metrica-precomputed-baseline-trim-factor) )
-
(
(
(
var(--metrica-precomputed-line-height-scale)
*
var(--metrica-font-size-scale)
)
-
( var(--metrica-line-height-unitless) )
)
/
2
/
( var(--metrica-font-size-scale) )
)
)
*
(-1)
)
}
@media (min-width: 1200px) {
html {
visibility: visible
}
div::before {
content: ' ';
display: table;
margin-bottom: calc(var(--metrica-cap-height-trim) * 1em)
}
@media (min-width: 1537px) {
html {
visibility: hidden
}
div::after {
content: ' ';
display: table;
margin-top: calc(var(--metrica-baseline-trim) * 1em)
}
@media (min-width: 2049px) {
html {
visibility: visible
}
div {
font-family: Berkeley Mono Variable,sans-serif;
--metrica-precomputed-cap-height-scale: 0.68;
--metrica-precomputed-baseline-trim-factor: 0.244;
--metrica-precomputed-cap-height-trim-factor: 0.276;
--metrica-precomputed-line-height-scale: 1.2;
--metrica-cap-size-unitless: 1.5;
--metrica-size-unit: 1rem;
--metrica-font-size-cap-scale: var(--metrica-cap-size-unitless) / var(--metrica-precomputed-cap-height-scale);
--metrica-font-size-scale: var(--metrica-font-size-cap-scale);
--metrica-font-size: calc( var(--metrica-font-size-scale) * var(--metrica-size-unit));
font-size: var(--metrica-font-size);
--metrica-line-height-unitless: 4;
--metrica-height-unit: 1rem;
line-height: calc( var(--metrica-line-height-unitless) * var(--metrica-height-unit))
}
`);
});
Expand All @@ -66,7 +130,7 @@ test('utility classes can be generated', () => {
// },
// },
// }).then(css => {
// expect(css).toMatchCss(`
// expect(css).toMatchCss(`
// .example-utility-class {
// display: block
// }
Expand Down

0 comments on commit 3256ae6

Please sign in to comment.