New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

tailwindcss-typography

Package Overview
Dependencies
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

tailwindcss-typography - npm Package Compare versions

Comparing version 2.2.0 to 3.0.0

3

.release-it.json
{
"git": {
"tagName": "v%s"
"tagName": "v%s",
"requireCleanWorkingDir": false
}
}

@@ -8,2 +8,16 @@ # Changelog

## [3.0.0] - 2020-02-05
### Added
- Added kerning utilities, which can be disabled by setting the `kerning` option to `false` (thanks, [@mapgrid](https://github.com/mapgrid)!)
- Added text rendering utilities, which can be customized with the `textRendering` theme object (thanks, [@mapgrid](https://github.com/mapgrid)!)
### Changed
- Changed to use Tailwind 1.2’s new plugin definition syntax
- Font variant utilities (caps, nums, and ligatures) are now generated from the `fontVariantCaps`, `fontVariantNumeric`, and `fontVariantLigatures` theme keys, and their names have changed to include a `caps-`, `nums-`, or `ligatures-` prefix (so `normal-caps` is now `caps-normal`, `no-ligatures` is now `ligatures-none`, etc.)
- The `caps`, `nums`, and `ligatures` variants keys have changed to `fontVariantCaps`, `fontVariantNumeric`, and `fontVariantLigatures`
### Removed
- Removed the `caps`, `nums`, and `ligatures` options
## [2.2.0] - 2019-09-02

@@ -76,3 +90,4 @@

[Unreleased]: https://github.com/benface/tailwindcss-typography/compare/v2.2.0...HEAD
[Unreleased]: https://github.com/benface/tailwindcss-typography/compare/v3.0.0...HEAD
[3.0.0]: https://github.com/benface/tailwindcss-typography/compare/v2.2.0...v3.0.0
[2.2.0]: https://github.com/benface/tailwindcss-typography/compare/v2.1.1...v2.2.0

@@ -79,0 +94,0 @@ [2.1.1]: https://github.com/benface/tailwindcss-typography/compare/v2.1.0...v2.1.1

@@ -0,3 +1,12 @@

const plugin = require('tailwindcss/plugin');
const _ = require('lodash');
const defaultOptions = {
ellipsis: true,
hyphens: true,
kerning: true,
textUnset: true,
componentPrefix: 'c-',
};
const camelCaseToKebabCase = function(string) {

@@ -10,41 +19,8 @@ return string

module.exports = function(options = {}) {
return ({ theme, variants, e, addUtilities, addComponents }) => {
const defaultOptions = {
ellipsis: true,
hyphens: true,
textUnset: true,
caps: true,
nums: true,
ligatures: true,
componentPrefix: 'c-',
};
module.exports = plugin.withOptions(function(options = {}) {
return function({ theme, variants, e, addUtilities, addComponents }) {
options = _.defaults({}, options, defaultOptions);
const defaultTextIndentTheme = {};
const defaultTextIndentVariants = ['responsive'];
const defaultTextShadowTheme = {};
const defaultTextShadowVariants = ['responsive'];
const defaultEllipsisVariants = ['responsive'];
const defaultHyphensVariants = ['responsive'];
const defaultTextUnsetVariants = ['responsive'];
const defaultCapsVariants = ['responsive'];
const defaultNumsVariants = ['responsive'];
const defaultLigaturesVariants = ['responsive'];
const defaultTextStylesTheme = {};
const textIndentTheme = theme('textIndent', defaultTextIndentTheme);
const textIndentVariants = variants('textIndent', defaultTextIndentVariants);
const textShadowTheme = theme('textShadow', defaultTextShadowTheme);
const textShadowVariants = variants('textShadow', defaultTextShadowVariants);
const ellipsisVariants = variants('ellipsis', defaultEllipsisVariants);
const hyphensVariants = variants('hyphens', defaultHyphensVariants);
const textUnsetVariants = variants('textUnset', defaultTextUnsetVariants);
const capsVariants = variants('caps', defaultCapsVariants);
const numsVariants = variants('nums', defaultNumsVariants);
const ligaturesVariants = variants('ligatures', defaultLigaturesVariants);
const textStylesTheme = theme('textStyles', defaultTextStylesTheme);
const textIndentUtilities = _.fromPairs(
_.map(textIndentTheme, (value, modifier) => {
_.map(theme('textIndent'), (value, modifier) => {
return [

@@ -60,3 +36,3 @@ `.${e(`indent-${modifier}`)}`,

const textShadowUtilities = _.fromPairs(
_.map(textShadowTheme, (value, modifier) => {
_.map(theme('textShadow'), (value, modifier) => {
return [

@@ -71,3 +47,3 @@ `.${e(`text-shadow${modifier === 'default' ? '' : `-${modifier}`}`)}`,

const ellipsisUtilities = {
const ellipsisUtilities = options.ellipsis ? {
'.ellipsis': {

@@ -79,5 +55,5 @@ textOverflow: 'ellipsis',

},
};
} : {};
const hyphensUtilities = {
const hyphensUtilities = options.hyphens ? {
'.hyphens-none': {

@@ -92,5 +68,17 @@ hyphens: 'none',

},
};
} : {};
const textUnsetUtilities = {
const kerningUtilities = options.kerning ? {
'.kerning': {
fontKerning: 'normal',
},
'.kerning-none': {
fontKerning: 'none',
},
'.kerning-auto': {
fontKerning: 'auto',
},
} : {};
const textUnsetUtilities = options.textUnset ? {
'.font-family-unset': {

@@ -123,88 +111,50 @@ fontFamily: 'inherit',

},
};
} : {};
const capsUtilities = {
'.normal-caps': {
fontVariantCaps: 'normal',
},
'.small-caps': {
fontVariantCaps: 'small-caps',
},
'.all-small-caps': {
fontVariantCaps: 'all-small-caps',
},
'.petite-caps': {
fontVariantCaps: 'petite-caps',
},
'.unicase': {
fontVariantCaps: 'unicase',
},
'.titling-caps': {
fontVariantCaps: 'titling-caps',
},
};
const fontVariantCapsUtilities = _.fromPairs(
_.map(theme('fontVariantCaps'), (value, modifier) => {
return [
`.${e(`caps-${modifier}`)}`,
{
fontVariantCaps: value,
},
];
})
);
const numsUtilities = {
'.normal-nums': {
fontVariantNumeric: 'normal',
},
'.ordinal-nums': {
fontVariantNumeric: 'ordinal',
},
'.slashed-zeros': {
fontVariantNumeric: 'slashed-zero',
},
'.lining-nums': {
fontVariantNumeric: 'lining-nums',
},
'.oldstyle-nums': {
fontVariantNumeric: 'oldstyle-nums',
},
'.proportional-nums': {
fontVariantNumeric: 'proportional-nums',
},
'.tabular-nums': {
fontVariantNumeric: 'tabular-nums',
},
'.diagonal-fractions': {
fontVariantNumeric: 'diagonal-fractions',
},
'.stacked-fractions': {
fontVariantNumeric: 'stacked-fractions',
},
};
const fontVariantNumericUtilities = _.fromPairs(
_.map(theme('fontVariantNumeric'), (value, modifier) => {
return [
`.${e(`nums-${modifier}`)}`,
{
fontVariantNumeric: value,
},
];
})
);
const ligaturesUtilities = {
'.normal-ligatures': {
fontVariantLigatures: 'normal',
},
'.no-ligatures': {
fontVariantLigatures: 'none',
},
'.common-ligatures': {
fontVariantLigatures: 'common-ligatures',
},
'.no-common-ligatures': {
fontVariantLigatures: 'no-common-ligatures',
},
'.discretionary-ligatures': {
fontVariantLigatures: 'discretionary-ligatures',
},
'.no-discretionary-ligatures': {
fontVariantLigatures: 'no-discretionary-ligatures',
},
'.historical-ligatures': {
fontVariantLigatures: 'historical-ligatures',
},
'.no-historical-ligatures': {
fontVariantLigatures: 'no-historical-ligatures',
},
'.contextual-ligatures': {
fontVariantLigatures: 'contextual',
},
'.no-contextual-ligatures': {
fontVariantLigatures: 'no-contextual',
},
};
const fontVariantLigaturesUtilities = _.fromPairs(
_.map(theme('fontVariantLigatures'), (value, modifier) => {
return [
`.${e(`ligatures-${modifier}`)}`,
{
fontVariantLigatures: value,
},
];
})
);
const textRenderingUtilities = _.fromPairs(
_.map(theme('textRendering'), (value, modifier) => {
return [
`.${e(`text-${modifier}`)}`,
{
textRendering: value,
},
];
})
);
const textStylesTheme = theme('textStyles');
const resolveTextStyle = function(styles) {

@@ -243,24 +193,71 @@ if (!_.isPlainObject(styles)) {

addUtilities(textIndentUtilities, textIndentVariants);
addUtilities(textShadowUtilities, textShadowVariants);
if (options.ellipsis) {
addUtilities(ellipsisUtilities, ellipsisVariants);
}
if (options.hyphens) {
addUtilities(hyphensUtilities, hyphensVariants);
}
if (options.textUnset) {
addUtilities(textUnsetUtilities, textUnsetVariants);
}
if (options.caps) {
addUtilities(capsUtilities, capsVariants);
}
if (options.nums) {
addUtilities(numsUtilities, numsVariants);
}
if (options.ligatures) {
addUtilities(ligaturesUtilities, ligaturesVariants);
}
addUtilities(textIndentUtilities, variants('textIndent'));
addUtilities(textShadowUtilities, variants('textShadow'));
addUtilities(ellipsisUtilities, variants('ellipsis'));
addUtilities(hyphensUtilities, variants('hyphens'));
addUtilities(kerningUtilities, variants('kerning'));
addUtilities(textUnsetUtilities, variants('textUnset'));
addUtilities(fontVariantCapsUtilities, variants('fontVariantCaps'));
addUtilities(fontVariantNumericUtilities, variants('fontVariantNumeric'));
addUtilities(fontVariantLigaturesUtilities, variants('fontVariantLigatures'));
addUtilities(textRenderingUtilities, variants('textRendering'));
addComponents(textStyles);
};
};
}, function() {
return {
theme: {
textIndent: {},
textShadow: {},
fontVariantCaps: {
'normal': 'normal',
'small': 'small-caps',
'all-small': 'all-small-caps',
'petite': 'petite-caps',
'unicase': 'unicase',
'titling': 'titling-caps',
},
fontVariantNumeric: {
'normal': 'normal',
'ordinal': 'ordinal',
'slashed-zero': 'slashed-zero',
'lining': 'lining-nums',
'oldstyle': 'oldstyle-nums',
'proportional': 'proportional-nums',
'tabular': 'tabular-nums',
'diagonal-fractions': 'diagonal-fractions',
'stacked-fractions': 'stacked-fractions',
},
fontVariantLigatures: {
'normal': 'normal',
'none': 'none',
'common': 'common-ligatures',
'no-common': 'no-common-ligatures',
'discretionary': 'discretionary-ligatures',
'no-discretionary': 'no-discretionary-ligatures',
'historical': 'historical-ligatures',
'no-historical': 'no-historical-ligatures',
'contextual': 'contextual',
'no-contextual': 'no-contextual',
},
textRendering: {
'rendering-auto': 'auto',
'optimize-legibility': 'optimizeLegibility',
'optimize-speed': 'optimizeSpeed',
'geometric-precision': 'geometricPrecision'
},
textStyles: {},
},
variants: {
textIndent: ['responsive'],
textShadow: ['responsive'],
ellipsis: ['responsive'],
hyphens: ['responsive'],
kerning: ['responsive'],
textUnset: ['responsive'],
fontVariantCaps: ['responsive'],
fontVariantNumeric: ['responsive'],
fontVariantLigatures: ['responsive'],
textRendering: ['responsive'],
},
};
});
{
"name": "tailwindcss-typography",
"version": "2.2.0",
"version": "3.0.0",
"description": "Tailwind CSS plugin to generate typography utilities and text style components",

@@ -18,9 +18,9 @@ "author": "Benoît Rouleau <benoit.rouleau@icloud.com>",

"devDependencies": {
"github-release-from-changelog": "^1.3.2",
"jest": "^24.9.0",
"github-release-from-changelog": "^2.1.0",
"jest": "^25.1.0",
"jest-matcher-css": "^1.1.0",
"postcss": "^7.0.17",
"release-it": "^12.3.6",
"tailwindcss": "1.1.2"
"postcss": "^7.0.26",
"release-it": "^12.4.3",
"tailwindcss": "1.2.0"
}
}

@@ -13,3 +13,3 @@ # Typography Plugin for Tailwind CSS

// tailwind.config.js
{
module.exports = {
theme: {

@@ -24,2 +24,39 @@ textIndent: { // defaults to {}

},
fontVariantCaps: { // defaults to these values
'normal': 'normal',
'small': 'small-caps',
'all-small': 'all-small-caps',
'petite': 'petite-caps',
'unicase': 'unicase',
'titling': 'titling-caps',
},
fontVariantNumeric: { // defaults to these values
'normal': 'normal',
'ordinal': 'ordinal',
'slashed-zero': 'slashed-zero',
'lining': 'lining-nums',
'oldstyle': 'oldstyle-nums',
'proportional': 'proportional-nums',
'tabular': 'tabular-nums',
'diagonal-fractions': 'diagonal-fractions',
'stacked-fractions': 'stacked-fractions',
},
fontVariantLigatures: { // defaults to these values
'normal': 'normal',
'none': 'none',
'common': 'common-ligatures',
'no-common': 'no-common-ligatures',
'discretionary': 'discretionary-ligatures',
'no-discretionary': 'no-discretionary-ligatures',
'historical': 'historical-ligatures',
'no-historical': 'no-historical-ligatures',
'contextual': 'contextual',
'no-contextual': 'no-contextual',
},
textRendering: { // defaults to these values
'rendering-auto': 'auto',
'optimize-legibility': 'optimizeLegibility',
'optimize-speed': 'optimizeSpeed',
'geometric-precision': 'geometricPrecision'
},
textStyles: theme => ({ // defaults to {}

@@ -117,6 +154,8 @@ heading: {

hyphens: ['responsive'],
kerning: ['responsive'],
textUnset: ['responsive'],
caps: ['responsive'],
nums: ['responsive'],
ligatures: ['responsive'],
fontVariantCaps: ['responsive'],
fontVariantNumeric: ['responsive'],
fontVariantLigatures: ['responsive'],
textRendering: ['responsive'],
},

@@ -128,10 +167,8 @@ plugins: [

hyphens: true, // whether to generate hyphenation utilities
kerning: true, // whether to generate kerning utilities
textUnset: true, // whether to generate utilities to unset text properties
caps: true, // whether to generate utilities to use alternate glyphs for capital letters
nums: true, // whether to generate utilities to use alternate glyphs for numbers, fractions, and ordinal markers
ligatures: true, // whether to generate ligature utilities
componentPrefix: 'c-', // the prefix to use for text style classes
}),
],
}
};
```

@@ -172,2 +209,13 @@

/* generated when the "kerning" option is set to true */
.kerning {
font-kerning: normal;
}
.kerning-none {
font-kerning: none;
}
.kerning-auto {
font-kerning: auto;
}
/* generated when the "textUnset" option is set to true */

@@ -202,82 +250,96 @@ .font-family-unset {

/* generated when the "caps" option is set to true */
.normal-caps {
/* configurable with the "fontVariantCaps" theme object */
.caps-normal {
font-variant-caps: normal;
}
.small-caps {
.caps-small {
font-variant-caps: small-caps;
}
.all-small-caps {
.caps-all-small {
font-variant-caps: all-small-caps;
}
.petite-caps {
.caps-petite {
font-variant-caps: petite-caps;
}
.unicase {
.caps-unicase {
font-variant-caps: unicase;
}
.titling-caps {
.caps-titling {
font-variant-caps: titling-caps;
}
/* generated when the "nums" option is set to true */
.normal-nums {
/* configurable with the "fontVariantNumeric" theme object */
.nums-normal {
font-variant-numeric: normal;
}
.ordinal-nums {
.nums-ordinal {
font-variant-numeric: ordinal;
}
.slashed-zeros {
.nums-slashed-zero {
font-variant-numeric: slashed-zero;
}
.lining-nums {
.nums-lining {
font-variant-numeric: lining-nums;
}
.oldstyle-nums {
.nums-oldstyle {
font-variant-numeric: oldstyle-nums;
}
.proportional-nums {
.nums-proportional {
font-variant-numeric: proportional-nums;
}
.tabular-nums {
.nums-tabular {
font-variant-numeric: tabular-nums;
}
.diagonal-fractions {
.nums-diagonal-fractions {
font-variant-numeric: diagonal-fractions;
}
.stacked-fractions {
.nums-stacked-fractions {
font-variant-numeric: stacked-fractions;
}
/* generated when the "ligatures" option is set to true */
.normal-ligatures {
/* configurable with the "fontVariantLigatures" theme object */
.ligatures-normal {
font-variant-ligatures: normal;
}
.no-ligatures {
.ligatures-none {
font-variant-ligatures: none;
}
.common-ligatures {
.ligatures-common {
font-variant-ligatures: common-ligatures;
}
.no-common-ligatures {
.ligatures-no-common {
font-variant-ligatures: no-common-ligatures;
}
.discretionary-ligatures {
.ligatures-discretionary {
font-variant-ligatures: discretionary-ligatures;
}
.no-discretionary-ligatures {
.ligatures-no-discretionary {
font-variant-ligatures: no-discretionary-ligatures;
}
.historical-ligatures {
.ligatures-historical {
font-variant-ligatures: historical-ligatures;
}
.no-historical-ligatures {
.ligatures-no-historical {
font-variant-ligatures: no-historical-ligatures;
}
.contextual-ligatures {
.ligatures-contextual {
font-variant-ligatures: contextual;
}
.no-contextual-ligatures {
.ligatures-no-contextual {
font-variant-ligatures: no-contextual;
}
/* configurable with the "textRendering" theme object */
.text-rendering-auto {
text-rendering: auto;
}
.text-optimize-legibility {
text-rendering: optimizeLegibility;
}
.text-optimize-speed {
text-rendering: optimizeSpeed;
}
.text-geometric-precision {
text-rendering: geometricPrecision;
}
```

@@ -284,0 +346,0 @@

@@ -53,2 +53,11 @@ const _ = require('lodash');

}
.kerning {
font-kerning: normal;
}
.kerning-none {
font-kerning: none;
}
.kerning-auto {
font-kerning: auto;
}
.font-family-unset {

@@ -81,77 +90,89 @@ font-family: inherit;

}
.normal-caps {
.caps-normal {
font-variant-caps: normal;
}
.small-caps {
.caps-small {
font-variant-caps: small-caps;
}
.all-small-caps {
.caps-all-small {
font-variant-caps: all-small-caps;
}
.petite-caps {
.caps-petite {
font-variant-caps: petite-caps;
}
.unicase {
.caps-unicase {
font-variant-caps: unicase;
}
.titling-caps {
.caps-titling {
font-variant-caps: titling-caps;
}
.normal-nums {
.nums-normal {
font-variant-numeric: normal;
}
.ordinal-nums {
.nums-ordinal {
font-variant-numeric: ordinal;
}
.slashed-zeros {
.nums-slashed-zero {
font-variant-numeric: slashed-zero;
}
.lining-nums {
.nums-lining {
font-variant-numeric: lining-nums;
}
.oldstyle-nums {
.nums-oldstyle {
font-variant-numeric: oldstyle-nums;
}
.proportional-nums {
.nums-proportional {
font-variant-numeric: proportional-nums;
}
.tabular-nums {
.nums-tabular {
font-variant-numeric: tabular-nums;
}
.diagonal-fractions {
.nums-diagonal-fractions {
font-variant-numeric: diagonal-fractions;
}
.stacked-fractions {
.nums-stacked-fractions {
font-variant-numeric: stacked-fractions;
}
.normal-ligatures {
.ligatures-normal {
font-variant-ligatures: normal;
}
.no-ligatures {
.ligatures-none {
font-variant-ligatures: none;
}
.common-ligatures {
.ligatures-common {
font-variant-ligatures: common-ligatures;
}
.no-common-ligatures {
.ligatures-no-common {
font-variant-ligatures: no-common-ligatures;
}
.discretionary-ligatures {
.ligatures-discretionary {
font-variant-ligatures: discretionary-ligatures;
}
.no-discretionary-ligatures {
.ligatures-no-discretionary {
font-variant-ligatures: no-discretionary-ligatures;
}
.historical-ligatures {
.ligatures-historical {
font-variant-ligatures: historical-ligatures;
}
.no-historical-ligatures {
.ligatures-no-historical {
font-variant-ligatures: no-historical-ligatures;
}
.contextual-ligatures {
.ligatures-contextual {
font-variant-ligatures: contextual;
}
.no-contextual-ligatures {
.ligatures-no-contextual {
font-variant-ligatures: no-contextual;
}
.text-rendering-auto {
text-rendering: auto;
}
.text-optimize-legibility {
text-rendering: optimizeLegibility;
}
.text-optimize-speed {
text-rendering: optimizeSpeed;
}
.text-geometric-precision {
text-rendering: geometricPrecision;
}
@media (min-width: 640px) {

@@ -173,2 +194,11 @@ .sm\\:ellipsis {

}
.sm\\:kerning {
font-kerning: normal;
}
.sm\\:kerning-none {
font-kerning: none;
}
.sm\\:kerning-auto {
font-kerning: auto;
}
.sm\\:font-family-unset {

@@ -201,77 +231,89 @@ font-family: inherit;

}
.sm\\:normal-caps {
.sm\\:caps-normal {
font-variant-caps: normal;
}
.sm\\:small-caps {
.sm\\:caps-small {
font-variant-caps: small-caps;
}
.sm\\:all-small-caps {
.sm\\:caps-all-small {
font-variant-caps: all-small-caps;
}
.sm\\:petite-caps {
.sm\\:caps-petite {
font-variant-caps: petite-caps;
}
.sm\\:unicase {
.sm\\:caps-unicase {
font-variant-caps: unicase;
}
.sm\\:titling-caps {
.sm\\:caps-titling {
font-variant-caps: titling-caps;
}
.sm\\:normal-nums {
.sm\\:nums-normal {
font-variant-numeric: normal;
}
.sm\\:ordinal-nums {
.sm\\:nums-ordinal {
font-variant-numeric: ordinal;
}
.sm\\:slashed-zeros {
.sm\\:nums-slashed-zero {
font-variant-numeric: slashed-zero;
}
.sm\\:lining-nums {
.sm\\:nums-lining {
font-variant-numeric: lining-nums;
}
.sm\\:oldstyle-nums {
.sm\\:nums-oldstyle {
font-variant-numeric: oldstyle-nums;
}
.sm\\:proportional-nums {
.sm\\:nums-proportional {
font-variant-numeric: proportional-nums;
}
.sm\\:tabular-nums {
.sm\\:nums-tabular {
font-variant-numeric: tabular-nums;
}
.sm\\:diagonal-fractions {
.sm\\:nums-diagonal-fractions {
font-variant-numeric: diagonal-fractions;
}
.sm\\:stacked-fractions {
.sm\\:nums-stacked-fractions {
font-variant-numeric: stacked-fractions;
}
.sm\\:normal-ligatures {
.sm\\:ligatures-normal {
font-variant-ligatures: normal;
}
.sm\\:no-ligatures {
.sm\\:ligatures-none {
font-variant-ligatures: none;
}
.sm\\:common-ligatures {
.sm\\:ligatures-common {
font-variant-ligatures: common-ligatures;
}
.sm\\:no-common-ligatures {
.sm\\:ligatures-no-common {
font-variant-ligatures: no-common-ligatures;
}
.sm\\:discretionary-ligatures {
.sm\\:ligatures-discretionary {
font-variant-ligatures: discretionary-ligatures;
}
.sm\\:no-discretionary-ligatures {
.sm\\:ligatures-no-discretionary {
font-variant-ligatures: no-discretionary-ligatures;
}
.sm\\:historical-ligatures {
.sm\\:ligatures-historical {
font-variant-ligatures: historical-ligatures;
}
.sm\\:no-historical-ligatures {
.sm\\:ligatures-no-historical {
font-variant-ligatures: no-historical-ligatures;
}
.sm\\:contextual-ligatures {
.sm\\:ligatures-contextual {
font-variant-ligatures: contextual;
}
.sm\\:no-contextual-ligatures {
.sm\\:ligatures-no-contextual {
font-variant-ligatures: no-contextual;
}
.sm\\:text-rendering-auto {
text-rendering: auto;
}
.sm\\:text-optimize-legibility {
text-rendering: optimizeLegibility;
}
.sm\\:text-optimize-speed {
text-rendering: optimizeSpeed;
}
.sm\\:text-geometric-precision {
text-rendering: geometricPrecision;
}
}

@@ -282,9 +324,16 @@ `);

test('the default utilities can be disabled', () => {
return generatePluginCss({}, {
hyphens: false,
textUnset: false,
caps: false,
nums: false,
ligatures: false,
test('the font variant utilities can be disabled', () => {
return generatePluginCss({
theme: {
fontVariantCaps: {},
fontVariantNumeric: {},
fontVariantLigatures: {},
textRendering: {},
},
variants: {
ellipsis: [],
hyphens: [],
kerning: [],
textUnset: [],
},
}).then(css => {

@@ -298,10 +347,47 @@ expect(css).toMatchCss(`

}
@media (min-width: 640px) {
.sm\\:ellipsis {
text-overflow: ellipsis;
}
.sm\\:no-ellipsis {
text-overflow: clip;
}
.hyphens-none {
hyphens: none;
}
.hyphens-manual {
hyphens: manual;
}
.hyphens-auto {
hyphens: auto;
}
.kerning {
font-kerning: normal;
}
.kerning-none {
font-kerning: none;
}
.kerning-auto {
font-kerning: auto;
}
.font-family-unset {
font-family: inherit;
}
.font-weight-unset {
font-weight: inherit;
}
.font-style-unset {
font-style: inherit;
}
.text-size-unset {
font-size: inherit;
}
.text-align-unset {
text-align: inherit;
}
.leading-unset {
line-height: inherit;
}
.tracking-unset {
letter-spacing: inherit;
}
.text-color-unset {
color: inherit;
}
.text-transform-unset {
text-transform: inherit;
}
`);

@@ -311,5 +397,23 @@ });

test('text indent and text shadow utilities can be customized', () => {
test('the ellipsis, hyphens, and text unset utilities can be disabled', () => {
return generatePluginCss({
theme: {
fontVariantCaps: {},
fontVariantNumeric: {},
fontVariantLigatures: {},
textRendering: {},
},
}, {
ellipsis: false,
hyphens: false,
kerning: false,
textUnset: false,
}).then(css => {
expect(css).toMatchCss(``);
});
});
test('the text indent and text shadow utilities can be customized', () => {
return generatePluginCss({
theme: {
textIndent: {

@@ -323,6 +427,8 @@ '1': '0.25rem',

},
fontVariantCaps: {},
fontVariantNumeric: {},
fontVariantLigatures: {},
textRendering: {},
},
variants: {
ellipsis: [],
hyphens: [],
textIndent: [],

@@ -333,6 +439,5 @@ textShadow: [],

ellipsis: false,
hyphens: false,
kerning: false,
textUnset: false,
caps: false,
nums: false,
ligatures: false,
}).then(css => {

@@ -352,11 +457,130 @@ expect(css).toMatchCss(`

}
.hyphens-none {
hyphens: none;
`);
});
});
test('the font variant utilities can be extended', () => {
return generatePluginCss({
theme: {
extend: {
fontVariantCaps: {
'inherit': 'inherit',
},
fontVariantNumeric: {
'initial': 'initial',
},
fontVariantLigatures: {
'revert': 'revert',
},
},
},
variants: {
fontVariantCaps: [],
fontVariantNumeric: [],
fontVariantLigatures: [],
textRendering: [],
},
}, {
ellipsis: false,
hyphens: false,
kerning: false,
textUnset: false,
}).then(css => {
expect(css).toMatchCss(`
.caps-normal {
font-variant-caps: normal;
}
.hyphens-manual {
hyphens: manual;
.caps-small {
font-variant-caps: small-caps;
}
.hyphens-auto {
hyphens: auto;
.caps-all-small {
font-variant-caps: all-small-caps;
}
.caps-petite {
font-variant-caps: petite-caps;
}
.caps-unicase {
font-variant-caps: unicase;
}
.caps-titling {
font-variant-caps: titling-caps;
}
.caps-inherit {
font-variant-caps: inherit;
}
.nums-normal {
font-variant-numeric: normal;
}
.nums-ordinal {
font-variant-numeric: ordinal;
}
.nums-slashed-zero {
font-variant-numeric: slashed-zero;
}
.nums-lining {
font-variant-numeric: lining-nums;
}
.nums-oldstyle {
font-variant-numeric: oldstyle-nums;
}
.nums-proportional {
font-variant-numeric: proportional-nums;
}
.nums-tabular {
font-variant-numeric: tabular-nums;
}
.nums-diagonal-fractions {
font-variant-numeric: diagonal-fractions;
}
.nums-stacked-fractions {
font-variant-numeric: stacked-fractions;
}
.nums-initial {
font-variant-numeric: initial;
}
.ligatures-normal {
font-variant-ligatures: normal;
}
.ligatures-none {
font-variant-ligatures: none;
}
.ligatures-common {
font-variant-ligatures: common-ligatures;
}
.ligatures-no-common {
font-variant-ligatures: no-common-ligatures;
}
.ligatures-discretionary {
font-variant-ligatures: discretionary-ligatures;
}
.ligatures-no-discretionary {
font-variant-ligatures: no-discretionary-ligatures;
}
.ligatures-historical {
font-variant-ligatures: historical-ligatures;
}
.ligatures-no-historical {
font-variant-ligatures: no-historical-ligatures;
}
.ligatures-contextual {
font-variant-ligatures: contextual;
}
.ligatures-no-contextual {
font-variant-ligatures: no-contextual;
}
.ligatures-revert {
font-variant-ligatures: revert;
}
.text-rendering-auto {
text-rendering: auto;
}
.text-optimize-legibility {
text-rendering: optimizeLegibility;
}
.text-optimize-speed {
text-rendering: optimizeSpeed;
}
.text-geometric-precision {
text-rendering: geometricPrecision;
}
`);

@@ -393,2 +617,6 @@ });

}),
fontVariantCaps: {},
fontVariantNumeric: {},
fontVariantLigatures: {},
textRendering: {},
},

@@ -398,6 +626,4 @@ }, {

hyphens: false,
kerning: false,
textUnset: false,
caps: false,
nums: false,
ligatures: false,
}).then(css => {

@@ -435,2 +661,6 @@ expect(css).toMatchCss(`

}),
fontVariantCaps: {},
fontVariantNumeric: {},
fontVariantLigatures: {},
textRendering: {},
},

@@ -440,6 +670,4 @@ }, {

hyphens: false,
kerning: false,
textUnset: false,
caps: false,
nums: false,
ligatures: false,
componentPrefix: '',

@@ -491,2 +719,6 @@ }).then(css => {

}),
fontVariantCaps: {},
fontVariantNumeric: {},
fontVariantLigatures: {},
textRendering: {},
},

@@ -496,6 +728,4 @@ }, {

hyphens: false,
kerning: false,
textUnset: false,
caps: false,
nums: false,
ligatures: false,
}).then(css => {

@@ -571,2 +801,6 @@ expect(css).toMatchCss(`

}),
fontVariantCaps: {},
fontVariantNumeric: {},
fontVariantLigatures: {},
textRendering: {},
},

@@ -576,6 +810,4 @@ }, {

hyphens: false,
kerning: false,
textUnset: false,
caps: false,
nums: false,
ligatures: false,
}).then(css => {

@@ -668,2 +900,6 @@ expect(css).toMatchCss(`

}),
fontVariantCaps: {},
fontVariantNumeric: {},
fontVariantLigatures: {},
textRendering: {},
},

@@ -673,6 +909,4 @@ }, {

hyphens: false,
kerning: false,
textUnset: false,
caps: false,
nums: false,
ligatures: false,
}).then(css => {

@@ -768,2 +1002,6 @@ expect(css).toMatchCss(`

}),
fontVariantCaps: {},
fontVariantNumeric: {},
fontVariantLigatures: {},
textRendering: {},
},

@@ -773,6 +1011,4 @@ }, {

hyphens: false,
kerning: false,
textUnset: false,
caps: false,
nums: false,
ligatures: false,
}).then(css => {

@@ -848,2 +1084,6 @@ expect(css).toMatchCss(`

}),
fontVariantCaps: {},
fontVariantNumeric: {},
fontVariantLigatures: {},
textRendering: {},
},

@@ -853,6 +1093,4 @@ }, {

hyphens: false,
kerning: false,
textUnset: false,
caps: false,
nums: false,
ligatures: false,
}).then(css => {

@@ -965,2 +1203,6 @@ expect(css).toMatchCss(`

}),
fontVariantCaps: {},
fontVariantNumeric: {},
fontVariantLigatures: {},
textRendering: {},
},

@@ -970,6 +1212,4 @@ }, {

hyphens: false,
kerning: false,
textUnset: false,
caps: false,
nums: false,
ligatures: false,
}).then(css => {

@@ -1051,6 +1291,8 @@ expect(css).toMatchCss(`

hyphens: ['active'],
kerning: ['focus'],
textUnset: [],
caps: ['focus', 'responsive'],
nums: ['group-hover'],
ligatures: [],
fontVariantCaps: ['focus', 'responsive'],
fontVariantNumeric: ['group-hover'],
fontVariantLigatures: [],
textRendering: [],
},

@@ -1089,2 +1331,20 @@ }).then(css => {

}
.kerning {
font-kerning: normal;
}
.kerning-none {
font-kerning: none;
}
.kerning-auto {
font-kerning: auto;
}
.focus\\:kerning:focus {
font-kerning: normal;
}
.focus\\:kerning-none:focus {
font-kerning: none;
}
.focus\\:kerning-auto:focus {
font-kerning: auto;
}
.font-family-unset {

@@ -1117,157 +1377,169 @@ font-family: inherit;

}
.normal-caps {
.caps-normal {
font-variant-caps: normal;
}
.small-caps {
.caps-small {
font-variant-caps: small-caps;
}
.all-small-caps {
.caps-all-small {
font-variant-caps: all-small-caps;
}
.petite-caps {
.caps-petite {
font-variant-caps: petite-caps;
}
.unicase {
.caps-unicase {
font-variant-caps: unicase;
}
.titling-caps {
.caps-titling {
font-variant-caps: titling-caps;
}
.focus\\:normal-caps:focus {
.focus\\:caps-normal:focus {
font-variant-caps: normal;
}
.focus\\:small-caps:focus {
.focus\\:caps-small:focus {
font-variant-caps: small-caps;
}
.focus\\:all-small-caps:focus {
.focus\\:caps-all-small:focus {
font-variant-caps: all-small-caps;
}
.focus\\:petite-caps:focus {
.focus\\:caps-petite:focus {
font-variant-caps: petite-caps;
}
.focus\\:unicase:focus {
.focus\\:caps-unicase:focus {
font-variant-caps: unicase;
}
.focus\\:titling-caps:focus {
.focus\\:caps-titling:focus {
font-variant-caps: titling-caps;
}
.normal-nums {
.nums-normal {
font-variant-numeric: normal;
}
.ordinal-nums {
.nums-ordinal {
font-variant-numeric: ordinal;
}
.slashed-zeros {
.nums-slashed-zero {
font-variant-numeric: slashed-zero;
}
.lining-nums {
.nums-lining {
font-variant-numeric: lining-nums;
}
.oldstyle-nums {
.nums-oldstyle {
font-variant-numeric: oldstyle-nums;
}
.proportional-nums {
.nums-proportional {
font-variant-numeric: proportional-nums;
}
.tabular-nums {
.nums-tabular {
font-variant-numeric: tabular-nums;
}
.diagonal-fractions {
.nums-diagonal-fractions {
font-variant-numeric: diagonal-fractions;
}
.stacked-fractions {
.nums-stacked-fractions {
font-variant-numeric: stacked-fractions;
}
.group:hover .group-hover\\:normal-nums {
.group:hover .group-hover\\:nums-normal {
font-variant-numeric: normal;
}
.group:hover .group-hover\\:ordinal-nums {
.group:hover .group-hover\\:nums-ordinal {
font-variant-numeric: ordinal;
}
.group:hover .group-hover\\:slashed-zeros {
.group:hover .group-hover\\:nums-slashed-zero {
font-variant-numeric: slashed-zero;
}
.group:hover .group-hover\\:lining-nums {
.group:hover .group-hover\\:nums-lining {
font-variant-numeric: lining-nums;
}
.group:hover .group-hover\\:oldstyle-nums {
.group:hover .group-hover\\:nums-oldstyle {
font-variant-numeric: oldstyle-nums;
}
.group:hover .group-hover\\:proportional-nums {
.group:hover .group-hover\\:nums-proportional {
font-variant-numeric: proportional-nums;
}
.group:hover .group-hover\\:tabular-nums {
.group:hover .group-hover\\:nums-tabular {
font-variant-numeric: tabular-nums;
}
.group:hover .group-hover\\:diagonal-fractions {
.group:hover .group-hover\\:nums-diagonal-fractions {
font-variant-numeric: diagonal-fractions;
}
.group:hover .group-hover\\:stacked-fractions {
.group:hover .group-hover\\:nums-stacked-fractions {
font-variant-numeric: stacked-fractions;
}
.normal-ligatures {
.ligatures-normal {
font-variant-ligatures: normal;
}
.no-ligatures {
.ligatures-none {
font-variant-ligatures: none;
}
.common-ligatures {
.ligatures-common {
font-variant-ligatures: common-ligatures;
}
.no-common-ligatures {
.ligatures-no-common {
font-variant-ligatures: no-common-ligatures;
}
.discretionary-ligatures {
.ligatures-discretionary {
font-variant-ligatures: discretionary-ligatures;
}
.no-discretionary-ligatures {
.ligatures-no-discretionary {
font-variant-ligatures: no-discretionary-ligatures;
}
.historical-ligatures {
.ligatures-historical {
font-variant-ligatures: historical-ligatures;
}
.no-historical-ligatures {
.ligatures-no-historical {
font-variant-ligatures: no-historical-ligatures;
}
.contextual-ligatures {
.ligatures-contextual {
font-variant-ligatures: contextual;
}
.no-contextual-ligatures {
.ligatures-no-contextual {
font-variant-ligatures: no-contextual;
}
.text-rendering-auto {
text-rendering: auto;
}
.text-optimize-legibility {
text-rendering: optimizeLegibility;
}
.text-optimize-speed {
text-rendering: optimizeSpeed;
}
.text-geometric-precision {
text-rendering: geometricPrecision;
}
@media (min-width: 640px) {
.sm\\:normal-caps {
.sm\\:caps-normal {
font-variant-caps: normal;
}
.sm\\:small-caps {
.sm\\:caps-small {
font-variant-caps: small-caps;
}
.sm\\:all-small-caps {
.sm\\:caps-all-small {
font-variant-caps: all-small-caps;
}
.sm\\:petite-caps {
.sm\\:caps-petite {
font-variant-caps: petite-caps;
}
.sm\\:unicase {
.sm\\:caps-unicase {
font-variant-caps: unicase;
}
.sm\\:titling-caps {
.sm\\:caps-titling {
font-variant-caps: titling-caps;
}
.sm\\:focus\\:normal-caps:focus {
.sm\\:focus\\:caps-normal:focus {
font-variant-caps: normal;
}
.sm\\:focus\\:small-caps:focus {
.sm\\:focus\\:caps-small:focus {
font-variant-caps: small-caps;
}
.sm\\:focus\\:all-small-caps:focus {
.sm\\:focus\\:caps-all-small:focus {
font-variant-caps: all-small-caps;
}
.sm\\:focus\\:petite-caps:focus {
.sm\\:focus\\:caps-petite:focus {
font-variant-caps: petite-caps;
}
.sm\\:focus\\:unicase:focus {
.sm\\:focus\\:caps-unicase:focus {
font-variant-caps: unicase;
}
.sm\\:focus\\:titling-caps:focus {
.sm\\:focus\\:caps-titling:focus {
font-variant-caps: titling-caps;

@@ -1274,0 +1546,0 @@ }

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc