[WIP] Unify JIT and AOT code paths (#4188)
* WIP * WIP * Finish combining JIT and AOT plugins Still lots of clean up that can be done in some of the more complex ones, but at least it's one file per plugin now. * Remove unused import * Fix AOT generation bugs * Move corePlugins/index.js to corePlugins.js * Convert JIT files to ESM * Move tests * Reorder core plugins to match JIT order * Update AOT apply tests * Unify utils * Combine plugin lists to one single source of truth * Finish resolving merge conflicts, fix tests Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
This commit is contained in:
Robin Malfait
Adam Wathan
parent
7112e21e0e
commit
d497777202
340 changed files with 428688 additions and 430807 deletions
|
|
@ -1,4 +1,4 @@
|
|||
/lib
|
||||
/docs
|
||||
/__tests__/fixtures/cli-utils.js
|
||||
/tests/fixtures/cli-utils.js
|
||||
/stubs/*
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
|
||||
|
||||
module.exports = createSimpleStaticUtilityPlugin({
|
||||
'.sr-only': {
|
||||
position: 'absolute',
|
||||
width: '1px',
|
||||
height: '1px',
|
||||
padding: '0',
|
||||
margin: '-1px',
|
||||
overflow: 'hidden',
|
||||
clip: 'rect(0, 0, 0, 0)',
|
||||
whiteSpace: 'nowrap',
|
||||
borderWidth: '0',
|
||||
},
|
||||
'.not-sr-only': {
|
||||
position: 'static',
|
||||
width: 'auto',
|
||||
height: 'auto',
|
||||
padding: '0',
|
||||
margin: '0',
|
||||
overflow: 'visible',
|
||||
clip: 'auto',
|
||||
whiteSpace: 'normal',
|
||||
},
|
||||
})
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
|
||||
|
||||
module.exports = createSimpleStaticUtilityPlugin({
|
||||
'.content-center': {
|
||||
'align-content': 'center',
|
||||
},
|
||||
'.content-start': {
|
||||
'align-content': 'flex-start',
|
||||
},
|
||||
'.content-end': {
|
||||
'align-content': 'flex-end',
|
||||
},
|
||||
'.content-between': {
|
||||
'align-content': 'space-between',
|
||||
},
|
||||
'.content-around': {
|
||||
'align-content': 'space-around',
|
||||
},
|
||||
'.content-evenly': {
|
||||
'align-content': 'space-evenly',
|
||||
},
|
||||
})
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
|
||||
|
||||
module.exports = createSimpleStaticUtilityPlugin({
|
||||
'.items-start': {
|
||||
'align-items': 'flex-start',
|
||||
},
|
||||
'.items-end': {
|
||||
'align-items': 'flex-end',
|
||||
},
|
||||
'.items-center': {
|
||||
'align-items': 'center',
|
||||
},
|
||||
'.items-baseline': {
|
||||
'align-items': 'baseline',
|
||||
},
|
||||
'.items-stretch': {
|
||||
'align-items': 'stretch',
|
||||
},
|
||||
})
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
|
||||
|
||||
module.exports = createSimpleStaticUtilityPlugin({
|
||||
'.self-auto': {
|
||||
'align-self': 'auto',
|
||||
},
|
||||
'.self-start': {
|
||||
'align-self': 'flex-start',
|
||||
},
|
||||
'.self-end': {
|
||||
'align-self': 'flex-end',
|
||||
},
|
||||
'.self-center': {
|
||||
'align-self': 'center',
|
||||
},
|
||||
'.self-stretch': {
|
||||
'align-self': 'stretch',
|
||||
},
|
||||
})
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
const { nameClass } = require('../pluginUtils')
|
||||
const transformThemeValue = require('../../lib/util/transformThemeValue').default
|
||||
const parseAnimationValue = require('../../lib/util/parseAnimationValue').default
|
||||
|
||||
module.exports = function ({ matchUtilities, theme }) {
|
||||
let keyframes = Object.fromEntries(
|
||||
Object.entries(theme('keyframes')).map(([key, value]) => {
|
||||
return [
|
||||
key,
|
||||
[
|
||||
{
|
||||
[`@keyframes ${key}`]: value,
|
||||
},
|
||||
{ respectVariants: false },
|
||||
],
|
||||
]
|
||||
})
|
||||
)
|
||||
|
||||
let transformValue = transformThemeValue('animation')
|
||||
matchUtilities({
|
||||
animate: [
|
||||
(modifier, { theme }) => {
|
||||
let value = transformValue(theme.animation[modifier])
|
||||
|
||||
if (modifier === '' || value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
let { name: animationName } = parseAnimationValue(value)
|
||||
|
||||
return [
|
||||
keyframes[animationName],
|
||||
{ [nameClass('animate', modifier)]: { animation: value } },
|
||||
].filter(Boolean)
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
|
||||
|
||||
module.exports = createSimpleStaticUtilityPlugin({
|
||||
'.appearance-none': { appearance: 'none' },
|
||||
})
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
|
||||
|
||||
module.exports = createSimpleStaticUtilityPlugin({
|
||||
'.bg-fixed': { 'background-attachment': 'fixed' },
|
||||
'.bg-local': { 'background-attachment': 'local' },
|
||||
'.bg-scroll': { 'background-attachment': 'scroll' },
|
||||
})
|
||||
|
|
@ -1 +0,0 @@
|
|||
module.exports = require('../../lib/plugins/backgroundBlendMode').default()
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
|
||||
|
||||
module.exports = createSimpleStaticUtilityPlugin({
|
||||
'.bg-clip-border': { 'background-clip': 'border-box' },
|
||||
'.bg-clip-padding': { 'background-clip': 'padding-box' },
|
||||
'.bg-clip-content': { 'background-clip': 'content-box' },
|
||||
'.bg-clip-text': { 'background-clip': 'text' },
|
||||
})
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
const flattenColorPalette = require('../../lib/util/flattenColorPalette').default
|
||||
const withAlphaVariable = require('../../lib/util/withAlphaVariable').default
|
||||
const { asColor, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ corePlugins, matchUtilities, theme }) {
|
||||
let colorPalette = flattenColorPalette(theme('backgroundColor'))
|
||||
|
||||
matchUtilities({
|
||||
bg: (modifier) => {
|
||||
let value = asColor(modifier, colorPalette)
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
if (corePlugins('backgroundOpacity')) {
|
||||
return {
|
||||
[nameClass('bg', modifier)]: withAlphaVariable({
|
||||
color: value,
|
||||
property: 'background-color',
|
||||
variable: '--tw-bg-opacity',
|
||||
}),
|
||||
}
|
||||
}
|
||||
|
||||
return { [nameClass('bg', modifier)]: { 'background-color': value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const { nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
bg: (modifier, { theme }) => {
|
||||
let value = theme.backgroundImage[modifier]
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('bg', modifier)]: { 'background-image': value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const { asValue, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
'bg-opacity': (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme.backgroundOpacity)
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('bg-opacity', modifier)]: { '--tw-bg-opacity': value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
module.exports = require('../../lib/plugins/backgroundOrigin').default()
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const { nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
bg: (modifier, { theme }) => {
|
||||
let value = theme.backgroundPosition[modifier]
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('bg', modifier)]: { 'background-position': value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
|
||||
|
||||
module.exports = createSimpleStaticUtilityPlugin({
|
||||
'.bg-repeat': { 'background-repeat': 'repeat' },
|
||||
'.bg-no-repeat': { 'background-repeat': 'no-repeat' },
|
||||
'.bg-repeat-x': { 'background-repeat': 'repeat-x' },
|
||||
'.bg-repeat-y': { 'background-repeat': 'repeat-y' },
|
||||
'.bg-repeat-round': { 'background-repeat': 'round' },
|
||||
'.bg-repeat-space': { 'background-repeat': 'space' },
|
||||
})
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const { nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
bg: (modifier, { theme }) => {
|
||||
let value = theme.backgroundSize[modifier]
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('bg', modifier)]: { 'background-size': value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
|
||||
|
||||
module.exports = createSimpleStaticUtilityPlugin({
|
||||
'.border-collapse': { 'border-collapse': 'collapse' },
|
||||
'.border-separate': { 'border-collapse': 'separate' },
|
||||
})
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
const flattenColorPalette = require('../../lib/util/flattenColorPalette').default
|
||||
const withAlphaVariable = require('../../lib/util/withAlphaVariable').default
|
||||
const { asColor, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ corePlugins, matchUtilities, theme }) {
|
||||
let colorPalette = flattenColorPalette(theme('borderColor'))
|
||||
|
||||
matchUtilities({
|
||||
border: (modifier) => {
|
||||
if (modifier === 'DEFAULT') {
|
||||
return []
|
||||
}
|
||||
|
||||
let value = asColor(modifier, colorPalette)
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
if (corePlugins('borderOpacity')) {
|
||||
return {
|
||||
[nameClass('border', modifier)]: withAlphaVariable({
|
||||
color: value,
|
||||
property: 'border-color',
|
||||
variable: '--tw-border-opacity',
|
||||
}),
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
[nameClass('border', modifier)]: { 'border-color': value },
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const { asValue, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
'border-opacity': (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme.borderOpacity)
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('border-opacity', modifier)]: { '--tw-border-opacity': value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,111 +0,0 @@
|
|||
const { asLength, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
rounded: (modifier, { theme }) => {
|
||||
let value = asLength(modifier, theme['borderRadius'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('rounded', modifier)]: { 'border-radius': value } }
|
||||
},
|
||||
})
|
||||
matchUtilities({
|
||||
'rounded-t': (modifier, { theme }) => {
|
||||
let value = asLength(modifier, theme['borderRadius'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return {
|
||||
[nameClass('rounded-t', modifier)]: {
|
||||
'border-top-left-radius': value,
|
||||
'border-top-right-radius': value,
|
||||
},
|
||||
}
|
||||
},
|
||||
'rounded-r': (modifier, { theme }) => {
|
||||
let value = asLength(modifier, theme['borderRadius'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return {
|
||||
[nameClass('rounded-r', modifier)]: {
|
||||
'border-top-right-radius': value,
|
||||
'border-bottom-right-radius': value,
|
||||
},
|
||||
}
|
||||
},
|
||||
'rounded-b': (modifier, { theme }) => {
|
||||
let value = asLength(modifier, theme['borderRadius'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return {
|
||||
[nameClass('rounded-b', modifier)]: {
|
||||
'border-bottom-right-radius': value,
|
||||
'border-bottom-left-radius': value,
|
||||
},
|
||||
}
|
||||
},
|
||||
'rounded-l': (modifier, { theme }) => {
|
||||
let value = asLength(modifier, theme['borderRadius'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return {
|
||||
[nameClass('rounded-l', modifier)]: {
|
||||
'border-top-left-radius': value,
|
||||
'border-bottom-left-radius': value,
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
matchUtilities({
|
||||
'rounded-tl': (modifier, { theme }) => {
|
||||
let value = asLength(modifier, theme['borderRadius'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('rounded-tl', modifier)]: { 'border-top-left-radius': value } }
|
||||
},
|
||||
'rounded-tr': (modifier, { theme }) => {
|
||||
let value = asLength(modifier, theme['borderRadius'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('rounded-tr', modifier)]: { 'border-top-right-radius': value } }
|
||||
},
|
||||
'rounded-br': (modifier, { theme }) => {
|
||||
let value = asLength(modifier, theme['borderRadius'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('rounded-br', modifier)]: { 'border-bottom-right-radius': value } }
|
||||
},
|
||||
'rounded-bl': (modifier, { theme }) => {
|
||||
let value = asLength(modifier, theme['borderRadius'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('rounded-bl', modifier)]: { 'border-bottom-left-radius': value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
|
||||
|
||||
module.exports = createSimpleStaticUtilityPlugin({
|
||||
'.border-solid': {
|
||||
'border-style': 'solid',
|
||||
},
|
||||
'.border-dashed': {
|
||||
'border-style': 'dashed',
|
||||
},
|
||||
'.border-dotted': {
|
||||
'border-style': 'dotted',
|
||||
},
|
||||
'.border-double': {
|
||||
'border-style': 'double',
|
||||
},
|
||||
'.border-none': {
|
||||
'border-style': 'none',
|
||||
},
|
||||
})
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
const { asLength, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
border: (modifier, { theme }) => {
|
||||
let value = asLength(modifier, theme['borderWidth'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('border', modifier)]: { 'border-width': value } }
|
||||
},
|
||||
})
|
||||
matchUtilities({
|
||||
'border-t': (modifier, { theme }) => {
|
||||
let value = asLength(modifier, theme['borderWidth'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('border-t', modifier)]: { 'border-top-width': value } }
|
||||
},
|
||||
'border-r': (modifier, { theme }) => {
|
||||
let value = asLength(modifier, theme['borderWidth'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('border-r', modifier)]: { 'border-right-width': value } }
|
||||
},
|
||||
'border-b': (modifier, { theme }) => {
|
||||
let value = asLength(modifier, theme['borderWidth'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('border-b', modifier)]: { 'border-bottom-width': value } }
|
||||
},
|
||||
'border-l': (modifier, { theme }) => {
|
||||
let value = asLength(modifier, theme['borderWidth'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('border-l', modifier)]: { 'border-left-width': value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
module.exports = require('../../lib/plugins/boxDecorationBreak').default()
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
const { nameClass } = require('../pluginUtils')
|
||||
const transformThemeValue = require('../../lib/util/transformThemeValue').default
|
||||
|
||||
let transformValue = transformThemeValue('boxShadow')
|
||||
let shadowReset = {
|
||||
'*': {
|
||||
'--tw-shadow': '0 0 #0000',
|
||||
},
|
||||
}
|
||||
|
||||
module.exports = function ({ addBase, matchUtilities }) {
|
||||
addBase(shadowReset)
|
||||
matchUtilities({
|
||||
shadow: (modifier, { theme }) => {
|
||||
modifier = modifier === '' ? 'DEFAULT' : modifier
|
||||
|
||||
let value = transformValue(theme.boxShadow[modifier])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
[nameClass('shadow', modifier)]: {
|
||||
'--tw-shadow': value === 'none' ? '0 0 #0000' : value,
|
||||
'box-shadow': [
|
||||
`var(--tw-ring-offset-shadow, 0 0 #0000)`,
|
||||
`var(--tw-ring-shadow, 0 0 #0000)`,
|
||||
`var(--tw-shadow)`,
|
||||
].join(', '),
|
||||
},
|
||||
},
|
||||
]
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
|
||||
|
||||
module.exports = createSimpleStaticUtilityPlugin({
|
||||
'.box-border': { 'box-sizing': 'border-box' },
|
||||
'.box-content': { 'box-sizing': 'content-box' },
|
||||
})
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
|
||||
|
||||
module.exports = createSimpleStaticUtilityPlugin({
|
||||
'.clear-left': { clear: 'left' },
|
||||
'.clear-right': { clear: 'right' },
|
||||
'.clear-both': { clear: 'both' },
|
||||
'.clear-none': { clear: 'none' },
|
||||
})
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
const container = require('../../lib/plugins/container')
|
||||
|
||||
module.exports = container()
|
||||
|
|
@ -1,240 +0,0 @@
|
|||
/**
|
||||
* Manually forked from SUIT CSS Base: https://github.com/suitcss/base
|
||||
* A thin layer on top of normalize.css that provides a starting point more
|
||||
* suitable for web applications.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Removes the default spacing and border for appropriate elements.
|
||||
*/
|
||||
|
||||
blockquote,
|
||||
dl,
|
||||
dd,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
hr,
|
||||
figure,
|
||||
p,
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Work around a Firefox/IE bug where the transparent `button` background
|
||||
* results in a loss of the default `button` focus styles.
|
||||
*/
|
||||
|
||||
button:focus {
|
||||
outline: 1px dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Tailwind custom reset styles
|
||||
*/
|
||||
|
||||
/**
|
||||
* 1. Use the user's configured `sans` font-family (with Tailwind's default
|
||||
* sans-serif font stack as a fallback) as a sane default.
|
||||
* 2. Use Tailwind's default "normal" line-height so the user isn't forced
|
||||
* to override it to ensure consistency even when using the default theme.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 1 */
|
||||
line-height: 1.5; /* 2 */
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Inherit font-family and line-height from `html` so users can set them as
|
||||
* a class directly on the `html` element.
|
||||
*/
|
||||
|
||||
body {
|
||||
font-family: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Prevent padding and border from affecting element width.
|
||||
*
|
||||
* We used to set this in the html element and inherit from
|
||||
* the parent element for everything else. This caused issues
|
||||
* in shadow-dom-enhanced elements like <details> where the content
|
||||
* is wrapped by a div with box-sizing set to `content-box`.
|
||||
*
|
||||
* https://github.com/mozdevs/cssremedy/issues/4
|
||||
*
|
||||
*
|
||||
* 2. Allow adding a border to an element by just adding a border-width.
|
||||
*
|
||||
* By default, the way the browser specifies that an element should have no
|
||||
* border is by setting it's border-style to `none` in the user-agent
|
||||
* stylesheet.
|
||||
*
|
||||
* In order to easily add borders to elements by just setting the `border-width`
|
||||
* property, we change the default border-style for all elements to `solid`, and
|
||||
* use border-width to hide them instead. This way our `border` utilities only
|
||||
* need to set the `border-width` property instead of the entire `border`
|
||||
* shorthand, making our border utilities much more straightforward to compose.
|
||||
*
|
||||
* https://github.com/tailwindcss/tailwindcss/pull/116
|
||||
*/
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box; /* 1 */
|
||||
border-width: 0; /* 2 */
|
||||
border-style: solid; /* 2 */
|
||||
border-color: theme('borderColor.DEFAULT', currentColor); /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Ensure horizontal rules are visible by default
|
||||
*/
|
||||
|
||||
hr {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Undo the `border-style: none` reset that Normalize applies to images so that
|
||||
* our `border-{width}` utilities have the expected effect.
|
||||
*
|
||||
* The Normalize reset is unnecessary for us since we default the border-width
|
||||
* to 0 on all elements.
|
||||
*
|
||||
* https://github.com/tailwindcss/tailwindcss/issues/362
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
opacity: 1;
|
||||
color: theme('colors.gray.400', #a1a1aa);
|
||||
}
|
||||
|
||||
button,
|
||||
[role="button"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset links to optimize for opt-in styling instead of
|
||||
* opt-out.
|
||||
*/
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset form element properties that are easy to forget to
|
||||
* style explicitly so you don't inadvertently introduce
|
||||
* styles that deviate from your design system. These styles
|
||||
* supplement a partial reset that is already applied by
|
||||
* normalize.css.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
padding: 0;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Use the configured 'mono' font family for elements that
|
||||
* are expected to be rendered with a monospace font, falling
|
||||
* back to the system monospace stack if there is no configured
|
||||
* 'mono' font family.
|
||||
*/
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: theme('fontFamily.mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
|
||||
}
|
||||
|
||||
/**
|
||||
* Make replaced elements `display: block` by default as that's
|
||||
* the behavior you want almost all of the time. Inspired by
|
||||
* CSS Remedy, with `svg` added as well.
|
||||
*
|
||||
* https://github.com/mozdevs/cssremedy/issues/14
|
||||
*/
|
||||
|
||||
img,
|
||||
svg,
|
||||
video,
|
||||
canvas,
|
||||
audio,
|
||||
iframe,
|
||||
embed,
|
||||
object {
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/**
|
||||
* Constrain images and videos to the parent width and preserve
|
||||
* their instrinsic aspect ratio.
|
||||
*
|
||||
* https://github.com/mozdevs/cssremedy/issues/14
|
||||
*/
|
||||
|
||||
img,
|
||||
video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const { asValue, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
cursor: (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme.cursor)
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('cursor', modifier)]: { cursor: value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
module.exports = require('../../lib/plugins/display').default()
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
const flattenColorPalette = require('../../lib/util/flattenColorPalette').default
|
||||
const withAlphaVariable = require('../../lib/util/withAlphaVariable').default
|
||||
const { asColor, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ corePlugins, matchUtilities, theme }) {
|
||||
let colorPalette = flattenColorPalette(theme('divideColor'))
|
||||
|
||||
// TODO: Make sure there is no issue with DEFAULT here
|
||||
matchUtilities({
|
||||
divide: (modifier) => {
|
||||
let value = asColor(modifier, colorPalette)
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
if (corePlugins('divideOpacity')) {
|
||||
return {
|
||||
[`${nameClass('divide', modifier)} > :not([hidden]) ~ :not([hidden])`]: withAlphaVariable({
|
||||
color: colorPalette[modifier],
|
||||
property: 'border-color',
|
||||
variable: '--tw-divide-opacity',
|
||||
}),
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
[`${nameClass('divide', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
|
||||
'border-color': value,
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
const { asValue, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
'divide-opacity': (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme.divideOpacity)
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return {
|
||||
[`${nameClass('divide-opacity', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
|
||||
'--tw-divide-opacity': value,
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
module.exports = function ({ addUtilities }) {
|
||||
addUtilities({
|
||||
'.divide-solid > :not([hidden]) ~ :not([hidden])': {
|
||||
'border-style': 'solid',
|
||||
},
|
||||
'.divide-dashed > :not([hidden]) ~ :not([hidden])': {
|
||||
'border-style': 'dashed',
|
||||
},
|
||||
'.divide-dotted > :not([hidden]) ~ :not([hidden])': {
|
||||
'border-style': 'dotted',
|
||||
},
|
||||
'.divide-double > :not([hidden]) ~ :not([hidden])': {
|
||||
'border-style': 'double',
|
||||
},
|
||||
'.divide-none > :not([hidden]) ~ :not([hidden])': {
|
||||
'border-style': 'none',
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
const { asLength, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ addUtilities, matchUtilities }) {
|
||||
matchUtilities({
|
||||
'divide-x': (modifier, { theme }) => {
|
||||
let value = asLength(modifier, theme['divideWidth'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
value = value === '0' ? '0px' : value
|
||||
|
||||
return {
|
||||
[`${nameClass('divide-x', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
|
||||
'--tw-divide-x-reverse': '0',
|
||||
'border-right-width': `calc(${value} * var(--tw-divide-x-reverse))`,
|
||||
'border-left-width': `calc(${value} * calc(1 - var(--tw-divide-x-reverse)))`,
|
||||
},
|
||||
}
|
||||
},
|
||||
'divide-y': (modifier, { theme }) => {
|
||||
let value = asLength(modifier, theme['divideWidth'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
value = value === '0' ? '0px' : value
|
||||
|
||||
return {
|
||||
[`${nameClass('divide-y', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
|
||||
'--tw-divide-y-reverse': '0',
|
||||
'border-top-width': `calc(${value} * calc(1 - var(--tw-divide-y-reverse)))`,
|
||||
'border-bottom-width': `calc(${value} * var(--tw-divide-y-reverse))`,
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
addUtilities({
|
||||
'.divide-y-reverse > :not([hidden]) ~ :not([hidden])': {
|
||||
'--tw-divide-y-reverse': '1',
|
||||
},
|
||||
'.divide-x-reverse > :not([hidden]) ~ :not([hidden])': {
|
||||
'--tw-divide-x-reverse': '1',
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
const flattenColorPalette = require('../../lib/util/flattenColorPalette').default
|
||||
const toColorValue = require('../../lib/util/toColorValue').default
|
||||
const { asColor, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities, theme }) {
|
||||
let colorPalette = flattenColorPalette(theme('fill'))
|
||||
|
||||
matchUtilities({
|
||||
fill: (modifier) => {
|
||||
let value = asColor(modifier, colorPalette)
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('fill', modifier)]: { fill: toColorValue(value) } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const { nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
flex: (modifier, { theme }) => {
|
||||
let value = theme.flex[modifier]
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('flex', modifier)]: { flex: theme.flex[modifier] } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
|
||||
|
||||
module.exports = createSimpleStaticUtilityPlugin({
|
||||
'.flex-row': {
|
||||
'flex-direction': 'row',
|
||||
},
|
||||
'.flex-row-reverse': {
|
||||
'flex-direction': 'row-reverse',
|
||||
},
|
||||
'.flex-col': {
|
||||
'flex-direction': 'column',
|
||||
},
|
||||
'.flex-col-reverse': {
|
||||
'flex-direction': 'column-reverse',
|
||||
},
|
||||
})
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const { asValue, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
'flex-grow': (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme.flexGrow)
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('flex-grow', modifier)]: { 'flex-grow': value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const { asValue, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
'flex-shrink': (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme.flexShrink)
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('flex-shrink', modifier)]: { 'flex-shrink': value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
|
||||
|
||||
module.exports = createSimpleStaticUtilityPlugin({
|
||||
'.flex-wrap': {
|
||||
'flex-wrap': 'wrap',
|
||||
},
|
||||
'.flex-wrap-reverse': {
|
||||
'flex-wrap': 'wrap-reverse',
|
||||
},
|
||||
'.flex-nowrap': {
|
||||
'flex-wrap': 'nowrap',
|
||||
},
|
||||
})
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
|
||||
|
||||
module.exports = createSimpleStaticUtilityPlugin({
|
||||
'.float-right': { float: 'right' },
|
||||
'.float-left': { float: 'left' },
|
||||
'.float-none': { float: 'none' },
|
||||
})
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
const { nameClass } = require('../pluginUtils')
|
||||
const transformThemeValue = require('../../lib/util/transformThemeValue').default
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
let transformValue = transformThemeValue('fontFamily')
|
||||
|
||||
matchUtilities({
|
||||
font: (modifier, { theme }) => {
|
||||
let value = transformValue(theme.fontFamily[modifier])
|
||||
|
||||
if (modifier === '' || value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('font', modifier)]: { 'font-family': transformValue(value) } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
const { asLength, nameClass } = require('../pluginUtils')
|
||||
const { isPlainObject } = require('../lib/utils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
text: (modifier, { theme }) => {
|
||||
let value = theme.fontSize[modifier]
|
||||
|
||||
if (value === undefined) {
|
||||
value = asLength(modifier, {})
|
||||
|
||||
return value === undefined
|
||||
? []
|
||||
: {
|
||||
[nameClass('text', modifier)]: {
|
||||
'font-size': value,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
let [fontSize, options] = Array.isArray(value) ? value : [value]
|
||||
let { lineHeight, letterSpacing } = isPlainObject(options)
|
||||
? options
|
||||
: {
|
||||
lineHeight: options,
|
||||
}
|
||||
|
||||
return {
|
||||
[nameClass('text', modifier)]: {
|
||||
'font-size': fontSize,
|
||||
...(lineHeight === undefined
|
||||
? {}
|
||||
: {
|
||||
'line-height': lineHeight,
|
||||
}),
|
||||
...(letterSpacing === undefined
|
||||
? {}
|
||||
: {
|
||||
'letter-spacing': letterSpacing,
|
||||
}),
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
|
||||
|
||||
module.exports = createSimpleStaticUtilityPlugin({
|
||||
'.antialiased': {
|
||||
'-webkit-font-smoothing': 'antialiased',
|
||||
'-moz-osx-font-smoothing': 'grayscale',
|
||||
},
|
||||
'.subpixel-antialiased': {
|
||||
'-webkit-font-smoothing': 'auto',
|
||||
'-moz-osx-font-smoothing': 'auto',
|
||||
},
|
||||
})
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
|
||||
|
||||
module.exports = createSimpleStaticUtilityPlugin({
|
||||
'.italic': { 'font-style': 'italic' },
|
||||
'.not-italic': { 'font-style': 'normal' },
|
||||
})
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
let fontVariantBaseStyles = {
|
||||
'.ordinal, .slashed-zero, .lining-nums, .oldstyle-nums, .proportional-nums, .tabular-nums, .diagonal-fractions, .stacked-fractions': {
|
||||
'--tw-ordinal': 'var(--tw-empty,/*!*/ /*!*/)',
|
||||
'--tw-slashed-zero': 'var(--tw-empty,/*!*/ /*!*/)',
|
||||
'--tw-numeric-figure': 'var(--tw-empty,/*!*/ /*!*/)',
|
||||
'--tw-numeric-spacing': 'var(--tw-empty,/*!*/ /*!*/)',
|
||||
'--tw-numeric-fraction': 'var(--tw-empty,/*!*/ /*!*/)',
|
||||
'font-variant-numeric':
|
||||
'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)',
|
||||
},
|
||||
}
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
'normal-nums': fontVariantBaseStyles,
|
||||
ordinal: fontVariantBaseStyles,
|
||||
'slashed-zero': fontVariantBaseStyles,
|
||||
'lining-nums': fontVariantBaseStyles,
|
||||
'oldstyle-nums': fontVariantBaseStyles,
|
||||
'proportional-nums': fontVariantBaseStyles,
|
||||
'tabular-nums': fontVariantBaseStyles,
|
||||
'diagonal-fractions': fontVariantBaseStyles,
|
||||
'stacked-fractions': fontVariantBaseStyles,
|
||||
})
|
||||
|
||||
matchUtilities({
|
||||
'normal-nums': { '.normal-nums': { 'font-variant-numeric': 'normal' } },
|
||||
ordinal: { '.ordinal': { '--tw-ordinal': 'ordinal' } },
|
||||
'slashed-zero': { '.slashed-zero': { '--tw-slashed-zero': 'slashed-zero' } },
|
||||
'lining-nums': { '.lining-nums': { '--tw-numeric-figure': 'lining-nums' } },
|
||||
'oldstyle-nums': { '.oldstyle-nums': { '--tw-numeric-figure': 'oldstyle-nums' } },
|
||||
'proportional-nums': { '.proportional-nums': { '--tw-numeric-spacing': 'proportional-nums' } },
|
||||
'tabular-nums': { '.tabular-nums': { '--tw-numeric-spacing': 'tabular-nums' } },
|
||||
'diagonal-fractions': {
|
||||
'.diagonal-fractions': { '--tw-numeric-fraction': 'diagonal-fractions' },
|
||||
},
|
||||
'stacked-fractions': { '.stacked-fractions': { '--tw-numeric-fraction': 'stacked-fractions' } },
|
||||
})
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
const { nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
font: (modifier, { theme }) => {
|
||||
let value = theme.fontWeight[modifier]
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('font', modifier)]: { 'font-weight': value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
const { asLength, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
gap: (modifier, { theme }) => {
|
||||
let value = asLength(modifier, theme['gap'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('gap', modifier)]: { gap: value } }
|
||||
},
|
||||
})
|
||||
matchUtilities({
|
||||
'gap-x': (modifier, { theme }) => {
|
||||
let value = asLength(modifier, theme['gap'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('gap-x', modifier)]: { 'column-gap': value } }
|
||||
},
|
||||
'gap-y': (modifier, { theme }) => {
|
||||
let value = asLength(modifier, theme['gap'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('gap-y', modifier)]: { 'row-gap': value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
const flattenColorPalette = require('../../lib/util/flattenColorPalette').default
|
||||
const toColorValue = require('../../lib/util/toColorValue').default
|
||||
const toRgba = require('../../lib/util/withAlphaVariable').toRgba
|
||||
const { asColor, nameClass } = require('../pluginUtils')
|
||||
|
||||
function transparentTo(value) {
|
||||
if (typeof value === 'function') {
|
||||
return value({ opacityValue: 0 })
|
||||
}
|
||||
|
||||
try {
|
||||
const [r, g, b] = toRgba(value)
|
||||
return `rgba(${r}, ${g}, ${b}, 0)`
|
||||
} catch (_error) {
|
||||
return `rgba(255, 255, 255, 0)`
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = function ({ matchUtilities, theme }) {
|
||||
let colorPalette = flattenColorPalette(theme('gradientColorStops'))
|
||||
|
||||
matchUtilities({
|
||||
from: (modifier) => {
|
||||
let value = asColor(modifier, colorPalette)
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
let transparentToValue = transparentTo(value)
|
||||
|
||||
return {
|
||||
[nameClass('from', modifier)]: {
|
||||
'--tw-gradient-from': toColorValue(value, 'from'),
|
||||
'--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to, ${transparentToValue})`,
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
matchUtilities({
|
||||
via: (modifier) => {
|
||||
let value = asColor(modifier, colorPalette)
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
let transparentToValue = transparentTo(value)
|
||||
|
||||
return {
|
||||
[nameClass('via', modifier)]: {
|
||||
'--tw-gradient-stops': `var(--tw-gradient-from), ${toColorValue(
|
||||
value,
|
||||
'via'
|
||||
)}, var(--tw-gradient-to, ${transparentToValue})`,
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
matchUtilities({
|
||||
to: (modifier) => {
|
||||
let value = asColor(modifier, colorPalette)
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return {
|
||||
[nameClass('to', modifier)]: {
|
||||
'--tw-gradient-to': toColorValue(value, 'to'),
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const { asList, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
'auto-cols': (modifier, { theme }) => {
|
||||
let value = asList(modifier, theme.gridAutoColumns)
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('auto-cols', modifier)]: { 'grid-auto-columns': value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
|
||||
|
||||
module.exports = createSimpleStaticUtilityPlugin({
|
||||
'.grid-flow-row': { gridAutoFlow: 'row' },
|
||||
'.grid-flow-col': { gridAutoFlow: 'column' },
|
||||
'.grid-flow-row-dense': { gridAutoFlow: 'row dense' },
|
||||
'.grid-flow-col-dense': { gridAutoFlow: 'column dense' },
|
||||
})
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const { asList, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
'auto-rows': (modifier, { theme }) => {
|
||||
let value = asList(modifier, theme.gridAutoRows)
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('auto-rows', modifier)]: { 'grid-auto-rows': value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
const { nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
col: (modifier, { theme }) => {
|
||||
if (modifier === '' || theme.gridColumn[modifier] === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('col', modifier)]: { 'grid-column': theme.gridColumn[modifier] } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const { nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
'col-end': (modifier, { theme }) => {
|
||||
let value = theme.gridColumnEnd[modifier]
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('col-end', modifier)]: { 'grid-column-end': value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const { nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
'col-start': (modifier, { theme }) => {
|
||||
let value = theme.gridColumnStart[modifier]
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('col-start', modifier)]: { 'grid-column-start': value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const { nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
row: (modifier, { theme }) => {
|
||||
let value = theme.gridRow[modifier]
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('row', modifier)]: { 'grid-row': value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const { nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
'row-end': (modifier, { theme }) => {
|
||||
let value = theme.gridRowEnd[modifier]
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('row-end', modifier)]: { 'grid-row-end': value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const { nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
'row-start': (modifier, { theme }) => {
|
||||
let value = theme.gridRowStart[modifier]
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('row-start', modifier)]: { 'grid-row-start': value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const { asList, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
'grid-cols': (modifier, { theme }) => {
|
||||
let value = asList(modifier, theme.gridTemplateColumns)
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('grid-cols', modifier)]: { 'grid-template-columns': value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const { asList, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
'grid-rows': (modifier, { theme }) => {
|
||||
let value = asList(modifier, theme.gridTemplateRows)
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('grid-rows', modifier)]: { 'grid-template-rows': value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const { asValue, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
h: (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme['height'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('h', modifier)]: { height: value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,322 +0,0 @@
|
|||
const postcss = require('postcss')
|
||||
const buildMediaQuery = require('../../lib/util/buildMediaQuery').default
|
||||
const prefixSelector = require('../../lib/util/prefixSelector').default
|
||||
const {
|
||||
updateLastClasses,
|
||||
updateAllClasses,
|
||||
transformAllSelectors,
|
||||
transformAllClasses,
|
||||
transformLastClasses,
|
||||
} = require('../pluginUtils')
|
||||
|
||||
module.exports = {
|
||||
pseudoClassVariants: function ({ config, addVariant }) {
|
||||
let pseudoVariants = [
|
||||
['first', 'first-child'],
|
||||
['last', 'last-child'],
|
||||
['odd', 'nth-child(odd)'],
|
||||
['even', 'nth-child(even)'],
|
||||
'visited',
|
||||
'checked',
|
||||
'focus-within',
|
||||
'hover',
|
||||
'focus',
|
||||
'focus-visible',
|
||||
'active',
|
||||
'disabled',
|
||||
]
|
||||
|
||||
for (let variant of pseudoVariants) {
|
||||
let [variantName, state] = Array.isArray(variant) ? variant : [variant, variant]
|
||||
|
||||
addVariant(
|
||||
variantName,
|
||||
transformAllClasses((className, { withPseudo }) => {
|
||||
return withPseudo(`${variantName}${config('separator')}${className}`, state)
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
for (let variant of pseudoVariants) {
|
||||
let [variantName, state] = Array.isArray(variant) ? variant : [variant, variant]
|
||||
let groupVariantName = `group-${variantName}`
|
||||
|
||||
addVariant(
|
||||
groupVariantName,
|
||||
transformAllSelectors((selector) => {
|
||||
let variantSelector = updateAllClasses(selector, (className) => {
|
||||
return `${groupVariantName}${config('separator')}${className}`
|
||||
})
|
||||
|
||||
if (variantSelector === selector) {
|
||||
return null
|
||||
}
|
||||
|
||||
let groupSelector = prefixSelector(
|
||||
config('prefix'),
|
||||
`.group${config('separator')}${state}`
|
||||
)
|
||||
|
||||
return `${groupSelector} ${variantSelector}`
|
||||
})
|
||||
)
|
||||
}
|
||||
},
|
||||
directionVariants: function ({ config, addVariant }) {
|
||||
addVariant(
|
||||
'ltr',
|
||||
transformAllSelectors(
|
||||
(selector) =>
|
||||
`[dir="ltr"] ${updateAllClasses(
|
||||
selector,
|
||||
(className) => `ltr${config('separator')}${className}`
|
||||
)}`
|
||||
)
|
||||
)
|
||||
|
||||
addVariant(
|
||||
'rtl',
|
||||
transformAllSelectors(
|
||||
(selector) =>
|
||||
`[dir="rtl"] ${updateAllClasses(
|
||||
selector,
|
||||
(className) => `rtl${config('separator')}${className}`
|
||||
)}`
|
||||
)
|
||||
)
|
||||
},
|
||||
reducedMotionVariants: function ({ config, addVariant }) {
|
||||
addVariant(
|
||||
'motion-safe',
|
||||
transformLastClasses(
|
||||
(className) => {
|
||||
return `motion-safe${config('separator')}${className}`
|
||||
},
|
||||
() => postcss.atRule({ name: 'media', params: '(prefers-reduced-motion: no-preference)' })
|
||||
)
|
||||
)
|
||||
|
||||
addVariant(
|
||||
'motion-reduce',
|
||||
transformLastClasses(
|
||||
(className) => {
|
||||
return `motion-reduce${config('separator')}${className}`
|
||||
},
|
||||
() => postcss.atRule({ name: 'media', params: '(prefers-reduced-motion: reduce)' })
|
||||
)
|
||||
)
|
||||
},
|
||||
darkVariants: function ({ config, addVariant }) {
|
||||
if (config('darkMode') === 'class') {
|
||||
addVariant(
|
||||
'dark',
|
||||
transformAllSelectors((selector) => {
|
||||
let variantSelector = updateLastClasses(selector, (className) => {
|
||||
return `dark${config('separator')}${className}`
|
||||
})
|
||||
|
||||
if (variantSelector === selector) {
|
||||
return null
|
||||
}
|
||||
|
||||
let darkSelector = prefixSelector(config('prefix'), `.dark`)
|
||||
|
||||
return `${darkSelector} ${variantSelector}`
|
||||
})
|
||||
)
|
||||
} else if (config('darkMode') === 'media') {
|
||||
addVariant(
|
||||
'dark',
|
||||
transformLastClasses(
|
||||
(className) => {
|
||||
return `dark${config('separator')}${className}`
|
||||
},
|
||||
() => postcss.atRule({ name: 'media', params: '(prefers-color-scheme: dark)' })
|
||||
)
|
||||
)
|
||||
}
|
||||
},
|
||||
screenVariants: function ({ config, theme, addVariant }) {
|
||||
for (let screen in theme('screens')) {
|
||||
let size = theme('screens')[screen]
|
||||
let query = buildMediaQuery(size)
|
||||
|
||||
addVariant(
|
||||
screen,
|
||||
transformLastClasses(
|
||||
(className) => {
|
||||
return `${screen}${config('separator')}${className}`
|
||||
},
|
||||
() => postcss.atRule({ name: 'media', params: query })
|
||||
)
|
||||
)
|
||||
}
|
||||
},
|
||||
|
||||
// Base
|
||||
preflight: require('./preflight'),
|
||||
|
||||
// Components
|
||||
container: require('./container'),
|
||||
|
||||
// Utilitiles
|
||||
accessibility: require('./accessibility'),
|
||||
pointerEvents: require('./pointerEvents'),
|
||||
visibility: require('./visibility'),
|
||||
position: require('./position'),
|
||||
inset: require('./inset'),
|
||||
isolation: require('./isolation'),
|
||||
zIndex: require('./zIndex'),
|
||||
order: require('./order'),
|
||||
gridColumn: require('./gridColumn'),
|
||||
gridColumnEnd: require('./gridColumnEnd'),
|
||||
gridColumnStart: require('./gridColumnStart'),
|
||||
gridRow: require('./gridRow'),
|
||||
gridRowEnd: require('./gridRowEnd'),
|
||||
gridRowStart: require('./gridRowStart'),
|
||||
float: require('./float'),
|
||||
clear: require('./clear'),
|
||||
margin: require('./margin'),
|
||||
boxSizing: require('./boxSizing'),
|
||||
display: require('./display'),
|
||||
height: require('./height'),
|
||||
maxHeight: require('./maxHeight'),
|
||||
minHeight: require('./minHeight'),
|
||||
width: require('./width'),
|
||||
minWidth: require('./minWidth'),
|
||||
maxWidth: require('./maxWidth'),
|
||||
flex: require('./flex'),
|
||||
flexShrink: require('./flexShrink'),
|
||||
flexGrow: require('./flexGrow'),
|
||||
tableLayout: require('./tableLayout'),
|
||||
borderCollapse: require('./borderCollapse'),
|
||||
|
||||
transform: require('./transform'),
|
||||
transformOrigin: require('./transformOrigin'),
|
||||
translate: require('./translate'),
|
||||
rotate: require('./rotate'),
|
||||
skew: require('./skew'),
|
||||
scale: require('./scale'),
|
||||
|
||||
animation: require('./animation'),
|
||||
|
||||
cursor: require('./cursor'),
|
||||
userSelect: require('./userSelect'),
|
||||
resize: require('./resize'),
|
||||
|
||||
listStylePosition: require('./listStylePosition'),
|
||||
listStyleType: require('./listStyleType'),
|
||||
|
||||
appearance: require('./appearance'),
|
||||
gridAutoColumns: require('./gridAutoColumns'),
|
||||
gridAutoFlow: require('./gridAutoFlow'),
|
||||
gridAutoRows: require('./gridAutoRows'),
|
||||
gridTemplateColumns: require('./gridTemplateColumns'),
|
||||
gridTemplateRows: require('./gridTemplateRows'),
|
||||
flexDirection: require('./flexDirection'),
|
||||
flexWrap: require('./flexWrap'),
|
||||
placeContent: require('./placeContent'),
|
||||
placeItems: require('./placeItems'),
|
||||
alignContent: require('./alignContent'),
|
||||
alignItems: require('./alignItems'),
|
||||
justifyContent: require('./justifyContent'),
|
||||
justifyItems: require('./justifyItems'),
|
||||
gap: require('./gap'),
|
||||
space: require('./space'),
|
||||
divideWidth: require('./divideWidth'),
|
||||
divideStyle: require('./divideStyle'),
|
||||
divideColor: require('./divideColor'),
|
||||
divideOpacity: require('./divideOpacity'),
|
||||
|
||||
placeSelf: require('./placeSelf'),
|
||||
alignSelf: require('./alignSelf'),
|
||||
justifySelf: require('./justifySelf'),
|
||||
|
||||
overflow: require('./overflow'),
|
||||
overscrollBehavior: require('./overscrollBehavior'),
|
||||
textOverflow: require('./textOverflow'),
|
||||
whitespace: require('./whitespace'),
|
||||
wordBreak: require('./wordBreak'),
|
||||
|
||||
borderRadius: require('./borderRadius'),
|
||||
borderWidth: require('./borderWidth'),
|
||||
borderStyle: require('./borderStyle'),
|
||||
borderColor: require('./borderColor'),
|
||||
borderOpacity: require('./borderOpacity'),
|
||||
|
||||
backgroundColor: require('./backgroundColor'),
|
||||
backgroundOpacity: require('./backgroundOpacity'),
|
||||
backgroundImage: require('./backgroundImage'),
|
||||
gradientColorStops: require('./gradientColorStops'),
|
||||
boxDecorationBreak: require('./boxDecorationBreak'),
|
||||
backgroundSize: require('./backgroundSize'),
|
||||
backgroundAttachment: require('./backgroundAttachment'),
|
||||
backgroundClip: require('./backgroundClip'),
|
||||
backgroundPosition: require('./backgroundPosition'),
|
||||
backgroundRepeat: require('./backgroundRepeat'),
|
||||
backgroundOrigin: require('./backgroundOrigin'),
|
||||
|
||||
fill: require('./fill'),
|
||||
stroke: require('./stroke'),
|
||||
strokeWidth: require('./strokeWidth'),
|
||||
|
||||
objectFit: require('./objectFit'),
|
||||
objectPosition: require('./objectPosition'),
|
||||
|
||||
padding: require('./padding'),
|
||||
|
||||
textAlign: require('./textAlign'),
|
||||
verticalAlign: require('./verticalAlign'),
|
||||
fontFamily: require('./fontFamily'),
|
||||
fontSize: require('./fontSize'),
|
||||
fontWeight: require('./fontWeight'),
|
||||
textTransform: require('./textTransform'),
|
||||
fontStyle: require('./fontStyle'),
|
||||
fontVariantNumeric: require('./fontVariantNumeric'),
|
||||
lineHeight: require('./lineHeight'),
|
||||
letterSpacing: require('./letterSpacing'),
|
||||
textColor: require('./textColor'),
|
||||
textOpacity: require('./textOpacity'),
|
||||
textDecoration: require('./textDecoration'),
|
||||
fontSmoothing: require('./fontSmoothing'),
|
||||
placeholderColor: require('./placeholderColor'),
|
||||
placeholderOpacity: require('./placeholderOpacity'),
|
||||
|
||||
opacity: require('./opacity'),
|
||||
backgroundBlendMode: require('./backgroundBlendMode'),
|
||||
mixBlendMode: require('./mixBlendMode'),
|
||||
boxShadow: require('./boxShadow'),
|
||||
outline: require('./outline'),
|
||||
ringWidth: require('./ringWidth'),
|
||||
ringColor: require('./ringColor'),
|
||||
ringOpacity: require('./ringOpacity'),
|
||||
ringOffsetWidth: require('./ringOffsetWidth'),
|
||||
ringOffsetColor: require('./ringOffsetColor'),
|
||||
|
||||
filter: require('../../lib/plugins/filter').default(),
|
||||
blur: require('../../lib/plugins/blur').default(),
|
||||
brightness: require('../../lib/plugins/brightness').default(),
|
||||
contrast: require('../../lib/plugins/contrast').default(),
|
||||
dropShadow: require('../../lib/plugins/dropShadow').default(),
|
||||
grayscale: require('../../lib/plugins/grayscale').default(),
|
||||
hueRotate: require('../../lib/plugins/hueRotate').default(),
|
||||
invert: require('../../lib/plugins/invert').default(),
|
||||
saturate: require('../../lib/plugins/saturate').default(),
|
||||
sepia: require('../../lib/plugins/sepia').default(),
|
||||
|
||||
backdropFilter: require('../../lib/plugins/backdropFilter').default(),
|
||||
backdropBlur: require('../../lib/plugins/backdropBlur').default(),
|
||||
backdropBrightness: require('../../lib/plugins/backdropBrightness').default(),
|
||||
backdropContrast: require('../../lib/plugins/backdropContrast').default(),
|
||||
backdropGrayscale: require('../../lib/plugins/backdropGrayscale').default(),
|
||||
backdropHueRotate: require('../../lib/plugins/backdropHueRotate').default(),
|
||||
backdropInvert: require('../../lib/plugins/backdropInvert').default(),
|
||||
backdropOpacity: require('../../lib/plugins/backdropOpacity').default(),
|
||||
backdropSaturate: require('../../lib/plugins/backdropSaturate').default(),
|
||||
backdropSepia: require('../../lib/plugins/backdropSepia').default(),
|
||||
|
||||
transitionProperty: require('./transitionProperty'),
|
||||
transitionDelay: require('./transitionDelay'),
|
||||
transitionDuration: require('./transitionDuration'),
|
||||
transitionTimingFunction: require('./transitionTimingFunction'),
|
||||
}
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
const { asValue, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
inset: (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme['inset'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return {
|
||||
[nameClass('inset', modifier)]: { top: value, right: value, bottom: value, left: value },
|
||||
}
|
||||
},
|
||||
})
|
||||
matchUtilities({
|
||||
'inset-x': (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme['inset'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('inset-x', modifier)]: { left: value, right: value } }
|
||||
},
|
||||
'inset-y': (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme['inset'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('inset-y', modifier)]: { top: value, bottom: value } }
|
||||
},
|
||||
})
|
||||
matchUtilities({
|
||||
top: (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme['inset'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('top', modifier)]: { top: value } }
|
||||
},
|
||||
right: (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme['inset'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('right', modifier)]: { right: value } }
|
||||
},
|
||||
bottom: (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme['inset'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('bottom', modifier)]: { bottom: value } }
|
||||
},
|
||||
left: (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme['inset'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('left', modifier)]: { left: value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
module.exports = require('../../lib/plugins/isolation').default()
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
|
||||
|
||||
module.exports = createSimpleStaticUtilityPlugin({
|
||||
'.justify-start': {
|
||||
'justify-content': 'flex-start',
|
||||
},
|
||||
'.justify-end': {
|
||||
'justify-content': 'flex-end',
|
||||
},
|
||||
'.justify-center': {
|
||||
'justify-content': 'center',
|
||||
},
|
||||
'.justify-between': {
|
||||
'justify-content': 'space-between',
|
||||
},
|
||||
'.justify-around': {
|
||||
'justify-content': 'space-around',
|
||||
},
|
||||
'.justify-evenly': {
|
||||
'justify-content': 'space-evenly',
|
||||
},
|
||||
})
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
|
||||
|
||||
module.exports = createSimpleStaticUtilityPlugin({
|
||||
'.justify-items-start': {
|
||||
'justify-items': 'start',
|
||||
},
|
||||
'.justify-items-end': {
|
||||
'justify-items': 'end',
|
||||
},
|
||||
'.justify-items-center': {
|
||||
'justify-items': 'center',
|
||||
},
|
||||
'.justify-items-stretch': {
|
||||
'justify-items': 'stretch',
|
||||
},
|
||||
})
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
|
||||
|
||||
module.exports = createSimpleStaticUtilityPlugin({
|
||||
'.justify-self-auto': {
|
||||
'justify-self': 'auto',
|
||||
},
|
||||
'.justify-self-start': {
|
||||
'justify-self': 'start',
|
||||
},
|
||||
'.justify-self-end': {
|
||||
'justify-self': 'end',
|
||||
},
|
||||
'.justify-self-center': {
|
||||
'justify-self': 'center',
|
||||
},
|
||||
'.justify-self-stretch': {
|
||||
'justify-self': 'stretch',
|
||||
},
|
||||
})
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const { asLength, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
tracking: (modifier, { theme }) => {
|
||||
let value = asLength(modifier, theme['letterSpacing'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('tracking', modifier)]: { 'letter-spacing': value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const { asLength, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
leading: (modifier, { theme }) => {
|
||||
let value = asLength(modifier, theme['lineHeight'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('leading', modifier)]: { 'line-height': value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
|
||||
|
||||
module.exports = createSimpleStaticUtilityPlugin({
|
||||
'.list-inside': { 'list-style-position': 'inside' },
|
||||
'.list-outside': { 'list-style-position': 'outside' },
|
||||
})
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
const { nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
list: (modifier, { theme }) => {
|
||||
if (modifier === '' || theme.listStyleType[modifier] === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('list', modifier)]: { 'list-style-type': theme.listStyleType[modifier] } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
const { asValue, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
m: (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme['margin'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('m', modifier)]: { margin: value } }
|
||||
},
|
||||
})
|
||||
matchUtilities({
|
||||
mx: (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme['margin'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('mx', modifier)]: { 'margin-left': value, 'margin-right': value } }
|
||||
},
|
||||
my: (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme['margin'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('my', modifier)]: { 'margin-top': value, 'margin-bottom': value } }
|
||||
},
|
||||
})
|
||||
matchUtilities({
|
||||
mt: (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme['margin'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('mt', modifier)]: { 'margin-top': value } }
|
||||
},
|
||||
mr: (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme['margin'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('mr', modifier)]: { 'margin-right': value } }
|
||||
},
|
||||
mb: (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme['margin'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('mb', modifier)]: { 'margin-bottom': value } }
|
||||
},
|
||||
ml: (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme['margin'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('ml', modifier)]: { 'margin-left': value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const { asValue, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
'max-h': (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme['maxHeight'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('max-h', modifier)]: { 'max-height': value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const { asValue, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
'max-w': (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme['maxWidth'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('max-w', modifier)]: { 'max-width': value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const { asValue, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
'min-h': (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme['minHeight'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('min-h', modifier)]: { 'min-height': value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const { asValue, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
'min-w': (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme['minWidth'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('min-w', modifier)]: { 'min-width': value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
module.exports = require('../../lib/plugins/mixBlendMode').default()
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
|
||||
|
||||
module.exports = createSimpleStaticUtilityPlugin({
|
||||
'.object-contain': { 'object-fit': 'contain' },
|
||||
'.object-cover': { 'object-fit': 'cover' },
|
||||
'.object-fill': { 'object-fit': 'fill' },
|
||||
'.object-none': { 'object-fit': 'none' },
|
||||
'.object-scale-down': { 'object-fit': 'scale-down' },
|
||||
})
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const { nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
object: (modifier, { theme }) => {
|
||||
if (modifier === '' || theme.objectPosition[modifier] === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return {
|
||||
[nameClass('object', modifier)]: { 'object-position': theme.objectPosition[modifier] },
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const { asValue, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
opacity: (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme.opacity)
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('opacity', modifier)]: { opacity: value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const { asValue, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
order: (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme.order)
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('order', modifier)]: { order: value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
const { nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
outline: (modifier, { theme }) => {
|
||||
let value = theme.outline[modifier]
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
let [outline, outlineOffset = '0'] = Array.isArray(value) ? value : [value]
|
||||
|
||||
return {
|
||||
[nameClass('outline', modifier)]: {
|
||||
outline,
|
||||
'outline-offset': outlineOffset,
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
|
||||
|
||||
module.exports = createSimpleStaticUtilityPlugin({
|
||||
'.overflow-auto': { overflow: 'auto' },
|
||||
'.overflow-hidden': { overflow: 'hidden' },
|
||||
'.overflow-visible': { overflow: 'visible' },
|
||||
'.overflow-scroll': { overflow: 'scroll' },
|
||||
'.overflow-x-auto': { 'overflow-x': 'auto' },
|
||||
'.overflow-y-auto': { 'overflow-y': 'auto' },
|
||||
'.overflow-x-hidden': { 'overflow-x': 'hidden' },
|
||||
'.overflow-y-hidden': { 'overflow-y': 'hidden' },
|
||||
'.overflow-x-visible': { 'overflow-x': 'visible' },
|
||||
'.overflow-y-visible': { 'overflow-y': 'visible' },
|
||||
'.overflow-x-scroll': { 'overflow-x': 'scroll' },
|
||||
'.overflow-y-scroll': { 'overflow-y': 'scroll' },
|
||||
})
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
|
||||
|
||||
module.exports = createSimpleStaticUtilityPlugin({
|
||||
'.overscroll-auto': { 'overscroll-behavior': 'auto' },
|
||||
'.overscroll-contain': { 'overscroll-behavior': 'contain' },
|
||||
'.overscroll-none': { 'overscroll-behavior': 'none' },
|
||||
'.overscroll-y-auto': { 'overscroll-behavior-y': 'auto' },
|
||||
'.overscroll-y-contain': { 'overscroll-behavior-y': 'contain' },
|
||||
'.overscroll-y-none': { 'overscroll-behavior-y': 'none' },
|
||||
'.overscroll-x-auto': { 'overscroll-behavior-x': 'auto' },
|
||||
'.overscroll-x-contain': { 'overscroll-behavior-x': 'contain' },
|
||||
'.overscroll-x-none': { 'overscroll-behavior-x': 'none' },
|
||||
})
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
const { asValue, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
p: (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme['padding'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('p', modifier)]: { padding: value } }
|
||||
},
|
||||
})
|
||||
matchUtilities({
|
||||
px: (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme['padding'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('px', modifier)]: { 'padding-left': value, 'padding-right': value } }
|
||||
},
|
||||
py: (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme['padding'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('py', modifier)]: { 'padding-top': value, 'padding-bottom': value } }
|
||||
},
|
||||
})
|
||||
matchUtilities({
|
||||
pt: (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme['padding'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('pt', modifier)]: { 'padding-top': value } }
|
||||
},
|
||||
pr: (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme['padding'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('pr', modifier)]: { 'padding-right': value } }
|
||||
},
|
||||
pb: (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme['padding'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('pb', modifier)]: { 'padding-bottom': value } }
|
||||
},
|
||||
pl: (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme['padding'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return { [nameClass('pl', modifier)]: { 'padding-left': value } }
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
|
||||
|
||||
module.exports = createSimpleStaticUtilityPlugin({
|
||||
'.place-content-center': {
|
||||
'place-content': 'center',
|
||||
},
|
||||
'.place-content-start': {
|
||||
'place-content': 'start',
|
||||
},
|
||||
'.place-content-end': {
|
||||
'place-content': 'end',
|
||||
},
|
||||
'.place-content-between': {
|
||||
'place-content': 'space-between',
|
||||
},
|
||||
'.place-content-around': {
|
||||
'place-content': 'space-around',
|
||||
},
|
||||
'.place-content-evenly': {
|
||||
'place-content': 'space-evenly',
|
||||
},
|
||||
'.place-content-stretch': {
|
||||
'place-content': 'stretch',
|
||||
},
|
||||
})
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
|
||||
|
||||
module.exports = createSimpleStaticUtilityPlugin({
|
||||
'.place-items-start': {
|
||||
'place-items': 'start',
|
||||
},
|
||||
'.place-items-end': {
|
||||
'place-items': 'end',
|
||||
},
|
||||
'.place-items-center': {
|
||||
'place-items': 'center',
|
||||
},
|
||||
'.place-items-stretch': {
|
||||
'place-items': 'stretch',
|
||||
},
|
||||
})
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
|
||||
|
||||
module.exports = createSimpleStaticUtilityPlugin({
|
||||
'.place-self-auto': {
|
||||
'place-self': 'auto',
|
||||
},
|
||||
'.place-self-start': {
|
||||
'place-self': 'start',
|
||||
},
|
||||
'.place-self-end': {
|
||||
'place-self': 'end',
|
||||
},
|
||||
'.place-self-center': {
|
||||
'place-self': 'center',
|
||||
},
|
||||
'.place-self-stretch': {
|
||||
'place-self': 'stretch',
|
||||
},
|
||||
})
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
const flattenColorPalette = require('../../lib/util/flattenColorPalette').default
|
||||
const withAlphaVariable = require('../../lib/util/withAlphaVariable').default
|
||||
const { asColor, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ corePlugins, matchUtilities, theme }) {
|
||||
let colorPalette = flattenColorPalette(theme('placeholderColor'))
|
||||
|
||||
matchUtilities({
|
||||
placeholder: (modifier) => {
|
||||
let value = asColor(modifier, colorPalette)
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
if (corePlugins('placeholderOpacity')) {
|
||||
return {
|
||||
[`${nameClass('placeholder', modifier)}::placeholder`]: withAlphaVariable({
|
||||
color: value,
|
||||
property: 'color',
|
||||
variable: '--tw-placeholder-opacity',
|
||||
}),
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
[`${nameClass('placeholder', modifier)}::placeholder`]: { color: value },
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
const { asValue, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
'placeholder-opacity': (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme.placeholderOpacity)
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return {
|
||||
[`${nameClass('placeholder-opacity', modifier)}::placeholder`]: {
|
||||
'--tw-placeholder-opacity': value,
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
|
||||
|
||||
module.exports = createSimpleStaticUtilityPlugin({
|
||||
'.pointer-events-none': { 'pointer-events': 'none' },
|
||||
'.pointer-events-auto': { 'pointer-events': 'auto' },
|
||||
})
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
|
||||
|
||||
module.exports = createSimpleStaticUtilityPlugin({
|
||||
'.static': { position: 'static' },
|
||||
'.fixed': { position: 'fixed' },
|
||||
'.absolute': { position: 'absolute' },
|
||||
'.relative': { position: 'relative' },
|
||||
'.sticky': {
|
||||
position: 'sticky',
|
||||
},
|
||||
})
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
const preflight = require('../../lib/plugins/preflight').default
|
||||
|
||||
module.exports = preflight()
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
|
||||
|
||||
module.exports = createSimpleStaticUtilityPlugin({
|
||||
'.resize-none': { resize: 'none' },
|
||||
'.resize-y': { resize: 'vertical' },
|
||||
'.resize-x': { resize: 'horizontal' },
|
||||
'.resize': { resize: 'both' },
|
||||
})
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
const flattenColorPalette = require('../../lib/util/flattenColorPalette').default
|
||||
const withAlphaVariable = require('../../lib/util/withAlphaVariable').default
|
||||
const { asColor, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities, theme }) {
|
||||
let colorPalette = flattenColorPalette(theme('ringColor'))
|
||||
|
||||
matchUtilities({
|
||||
ring: (modifier) => {
|
||||
if (modifier === 'DEFAULT') {
|
||||
return []
|
||||
}
|
||||
|
||||
let value = asColor(modifier, colorPalette)
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return {
|
||||
[nameClass('ring', modifier)]: withAlphaVariable({
|
||||
color: value,
|
||||
property: '--tw-ring-color',
|
||||
variable: '--tw-ring-opacity',
|
||||
}),
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
const flattenColorPalette = require('../../lib/util/flattenColorPalette').default
|
||||
const toColorValue = require('../../lib/util/toColorValue').default
|
||||
const { asColor, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities, theme }) {
|
||||
let colorPalette = flattenColorPalette(theme('ringOffsetColor'))
|
||||
|
||||
matchUtilities({
|
||||
'ring-offset': (modifier) => {
|
||||
let value = asColor(modifier, colorPalette)
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return {
|
||||
[nameClass('ring-offset', modifier)]: {
|
||||
'--tw-ring-offset-color': toColorValue(value),
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
const { asLength, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
'ring-offset': (modifier, { theme }) => {
|
||||
let value = asLength(modifier, theme['ringOffsetWidth'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return {
|
||||
[nameClass('ring-offset', modifier)]: {
|
||||
'--tw-ring-offset-width': value,
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
const { asValue, nameClass } = require('../pluginUtils')
|
||||
|
||||
module.exports = function ({ matchUtilities }) {
|
||||
matchUtilities({
|
||||
'ring-opacity': (modifier, { theme }) => {
|
||||
let value = asValue(modifier, theme['ringOpacity'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return {
|
||||
[nameClass('ring-opacity', modifier)]: {
|
||||
'--tw-ring-opacity': value,
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
const dlv = require('dlv')
|
||||
const toRgba = require('../../lib/util/withAlphaVariable').toRgba
|
||||
const { asLength, nameClass } = require('../pluginUtils')
|
||||
|
||||
function safeCall(callback, defaultValue) {
|
||||
try {
|
||||
return callback()
|
||||
} catch (_error) {
|
||||
return defaultValue
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = function ({ addBase, matchUtilities, addUtilities, jit: { theme } }) {
|
||||
let ringColorDefault = (([r, g, b]) => {
|
||||
return `rgba(${r}, ${g}, ${b}, ${dlv(theme, ['ringOpacity', 'DEFAULT'], '0.5')})`
|
||||
})(safeCall(() => toRgba(dlv(theme, ['ringColor', 'DEFAULT'])), ['147', '197', '253']))
|
||||
|
||||
let ringReset = {
|
||||
'*': {
|
||||
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
|
||||
'--tw-ring-offset-width': dlv(theme, ['ringOffsetWidth', 'DEFAULT'], '0px'),
|
||||
'--tw-ring-offset-color': dlv(theme, ['ringOffsetColor', 'DEFAULT'], '#fff'),
|
||||
'--tw-ring-color': ringColorDefault,
|
||||
'--tw-ring-offset-shadow': '0 0 #0000',
|
||||
'--tw-ring-shadow': '0 0 #0000',
|
||||
},
|
||||
}
|
||||
|
||||
addBase(ringReset)
|
||||
|
||||
matchUtilities({
|
||||
ring: (modifier, { theme }) => {
|
||||
let value = asLength(modifier, theme['ringWidth'])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
[nameClass('ring', modifier)]: {
|
||||
'--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
|
||||
'--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(${value} + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
|
||||
'box-shadow': [
|
||||
`var(--tw-ring-offset-shadow)`,
|
||||
`var(--tw-ring-shadow)`,
|
||||
`var(--tw-shadow, 0 0 #0000)`,
|
||||
].join(', '),
|
||||
},
|
||||
},
|
||||
]
|
||||
},
|
||||
})
|
||||
|
||||
addUtilities({
|
||||
'.ring-inset': {
|
||||
'--tw-ring-inset': 'inset',
|
||||
},
|
||||
})
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue