wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

WIP

Browse source 
Still gotta do shadows + backdrop filter
This commit is contained in:
Adam Wathan 2021-06-24 17:01:36 -04:00
parent fdfecf3b9c
commit 04d66b0f47
33 changed files with 1154 additions and 298 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/plugins/blur.js
View file

@ -1,19 +1,41 @@
import { addBaseSelector } from './filter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
{
blur: (value) => {
return {
'--tw-blur': `blur(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
return function ({ config, matchUtilities, theme, variants, memory }) {
if (config('mode') === 'jit') {
matchUtilities(
{
blur: (value, { selector }) => {
addBaseSelector(memory, selector)
return {
'--tw-blur': `blur(${value})`,
filter: 'var(--tw-filter)',
}
},
},
},
{
values: theme('blur'),
variants: variants('blur'),
type: 'any',
}
)
{
values: theme('blur'),
variants: variants('blur'),
type: 'any',
}
)
} else {
matchUtilities(
{
blur: (value) => {
return {
'--tw-blur': `blur(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
},
},
{
values: theme('blur'),
variants: variants('blur'),
type: 'any',
}
)
}
}
}

52
src/plugins/brightness.js
View file

@ -1,19 +1,41 @@
import { addBaseSelector } from './filter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
{
brightness: (value) => {
return {
'--tw-brightness': `brightness(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
return function ({ config, matchUtilities, theme, variants, memory }) {
if (config('mode') === 'jit') {
matchUtilities(
{
brightness: (value, { selector }) => {
addBaseSelector(memory, selector)
return {
'--tw-brightness': `brightness(${value})`,
filter: 'var(--tw-filter)',
}
},
},
},
{
values: theme('brightness'),
variants: variants('brightness'),
type: 'any',
}
)
{
values: theme('brightness'),
variants: variants('brightness'),
type: 'any',
}
)
} else {
matchUtilities(
{
brightness: (value) => {
return {
'--tw-brightness': `brightness(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
},
},
{
values: theme('brightness'),
variants: variants('brightness'),
type: 'any',
}
)
}
}
}

48
src/plugins/contrast.js
View file

@ -1,15 +1,41 @@
import { addBaseSelector } from './filter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
{
contrast: (value) => {
return {
'--tw-contrast': `contrast(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
return function ({ config, matchUtilities, theme, variants, memory }) {
if (config('mode') === 'jit') {
matchUtilities(
{
contrast: (value, { selector }) => {
addBaseSelector(memory, selector)
return {
'--tw-contrast': `contrast(${value})`,
filter: 'var(--tw-filter)',
}
},
},
},
{ values: theme('contrast'), variants: variants('contrast'), type: 'any' }
)
{
values: theme('contrast'),
variants: variants('contrast'),
type: 'any',
}
)
} else {
matchUtilities(
{
contrast: (value) => {
return {
'--tw-contrast': `contrast(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
},
},
{
values: theme('contrast'),
variants: variants('contrast'),
type: 'any',
}
)
}
}
}

53
src/plugins/dropShadow.js
View file

@ -1,22 +1,45 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { addBaseSelector } from './filter'
export default function () {
return function ({ config, addUtilities, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('dropShadow'), (value, modifier) => {
return [
nameClass('drop-shadow', modifier),
{
'--tw-drop-shadow': Array.isArray(value)
? value.map((v) => `drop-shadow(${v})`).join(' ')
: `drop-shadow(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
},
]
})
)
return function ({ config, matchUtilities, addUtilities, theme, variants, memory }) {
if (config('mode') === 'jit') {
matchUtilities(
{
'drop-shadow': (value, { selector }) => {
addBaseSelector(memory, selector)
addUtilities(utilities, variants('dropShadow'))
return {
'--tw-drop-shadow': Array.isArray(value)
? value.map((v) => `drop-shadow(${v})`).join(' ')
: `drop-shadow(${value})`,
filter: 'var(--tw-filter)',
}
},
},
{
values: theme('dropShadow'),
variants: variants('dropShadow'),
type: 'lookup',
}
)
} else {
const utilities = _.fromPairs(
_.map(theme('dropShadow'), (value, modifier) => {
return [
nameClass('drop-shadow', modifier),
{
'--tw-drop-shadow': Array.isArray(value)
? value.map((v) => `drop-shadow(${v})`).join(' ')
: `drop-shadow(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
},
]
})
)
addUtilities(utilities, variants('dropShadow'))
}
}
}

49
src/plugins/filter.js
View file

@ -1,8 +1,15 @@
export default function () {
return function ({ config, addBase, addUtilities, variants }) {
if (config('mode') === 'jit') {
addBase({
'*, ::before, ::after': {
import postcss from 'postcss'
import parseObjectStyles from '../util/parseObjectStyles'
let baseRulesKey = Symbol()
export function addBaseSelector(memory, selector) {
let baseRoot = memory.get(baseRulesKey)
if (baseRoot.nodes.length === 0) {
baseRoot.append(
parseObjectStyles({
[selector]: {
'--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
@ -25,12 +32,36 @@ export default function () {
].join(' '),
},
})
addUtilities(
)
} else {
baseRoot.nodes[0].selectors = [...baseRoot.nodes[0].selectors, selector]
}
}
export default function () {
return function ({ config, matchUtilities, addBase, addUtilities, variants, memory }) {
if (config('mode') === 'jit') {
let baseRoot = postcss.root()
memory.set(baseRulesKey, baseRoot)
addBase(baseRoot)
matchUtilities(
{
'.filter': { filter: 'var(--tw-filter)' },
'.filter-none': { filter: 'none' },
filter: (value, { selector }) => {
if (value !== 'none') {
addBaseSelector(memory, selector)
}
return {
filter: value,
}
},
},
variants('filter')
{
values: { DEFAULT: 'var(--tw-filter)', none: 'none' },
variants: variants('filter'),
type: 'any',
}
)
} else {
addUtilities(

52
src/plugins/grayscale.js
View file

@ -1,19 +1,41 @@
import { addBaseSelector } from './filter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
{
grayscale: (value) => {
return {
'--tw-grayscale': `grayscale(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
return function ({ config, matchUtilities, theme, variants, memory }) {
if (config('mode') === 'jit') {
matchUtilities(
{
grayscale: (value, { selector }) => {
addBaseSelector(memory, selector)
return {
'--tw-grayscale': `grayscale(${value})`,
filter: 'var(--tw-filter)',
}
},
},
},
{
values: theme('grayscale'),
variants: variants('grayscale'),
type: 'any',
}
)
{
values: theme('grayscale'),
variants: variants('grayscale'),
type: 'any',
}
)
} else {
matchUtilities(
{
grayscale: (value) => {
return {
'--tw-grayscale': `grayscale(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
},
},
{
values: theme('grayscale'),
variants: variants('grayscale'),
type: 'any',
}
)
}
}
}

52
src/plugins/hueRotate.js
View file

@ -1,19 +1,41 @@
import { addBaseSelector } from './filter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
{
'hue-rotate': (value) => {
return {
'--tw-hue-rotate': `hue-rotate(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
return function ({ config, matchUtilities, theme, variants, memory }) {
if (config('mode') === 'jit') {
matchUtilities(
{
'hue-rotate': (value, { selector }) => {
addBaseSelector(memory, selector)
return {
'--tw-hue-rotate': `hue-rotate(${value})`,
filter: 'var(--tw-filter)',
}
},
},
},
{
values: theme('hueRotate'),
variants: variants('hueRotate'),
type: 'any',
}
)
{
values: theme('hueRotate'),
variants: variants('hueRotate'),
type: 'any',
}
)
} else {
matchUtilities(
{
'hue-rotate': (value) => {
return {
'--tw-hue-rotate': `hue-rotate(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
},
},
{
values: theme('hueRotate'),
variants: variants('hueRotate'),
type: 'any',
}
)
}
}
}

4
src/plugins/index.js
View file

@ -34,11 +34,11 @@ export { default as tableLayout } from './tableLayout'
export { default as borderCollapse } from './borderCollapse'
export { default as transformOrigin } from './transformOrigin'
export { default as transform } from './transform'
export { default as translate } from './translate'
export { default as rotate } from './rotate'
export { default as skew } from './skew'
export { default as scale } from './scale'
export { default as transform } from './transform'
export { default as animation } from './animation'
@ -136,6 +136,7 @@ export { default as ringOpacity } from './ringOpacity'
export { default as ringOffsetWidth } from './ringOffsetWidth'
export { default as ringOffsetColor } from './ringOffsetColor'
export { default as filter } from './filter'
export { default as blur } from './blur'
export { default as brightness } from './brightness'
export { default as contrast } from './contrast'
@ -145,7 +146,6 @@ export { default as hueRotate } from './hueRotate'
export { default as invert } from './invert'
export { default as saturate } from './saturate'
export { default as sepia } from './sepia'
export { default as filter } from './filter'
export { default as backdropBlur } from './backdropBlur'
export { default as backdropBrightness } from './backdropBrightness'

52
src/plugins/invert.js
View file

@ -1,19 +1,41 @@
import { addBaseSelector } from './filter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
{
invert: (value) => {
return {
'--tw-invert': `invert(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
return function ({ config, matchUtilities, theme, variants, memory }) {
if (config('mode') === 'jit') {
matchUtilities(
{
invert: (value, { selector }) => {
addBaseSelector(memory, selector)
return {
'--tw-invert': `invert(${value})`,
filter: 'var(--tw-filter)',
}
},
},
},
{
values: theme('invert'),
variants: variants('invert'),
type: 'any',
}
)
{
values: theme('invert'),
variants: variants('invert'),
type: 'any',
}
)
} else {
matchUtilities(
{
invert: (value) => {
return {
'--tw-invert': `invert(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
},
},
{
values: theme('invert'),
variants: variants('invert'),
type: 'any',
}
)
}
}
}

13
src/plugins/rotate.js
View file

@ -1,11 +1,18 @@
import { addBaseSelector } from './transform'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return function ({ config, ...rest }) {
if (config('mode') === 'jit') {
return createUtilityPlugin('rotate', [
['rotate', ['--tw-rotate', ['transform', 'var(--tw-transform)']]],
])({ config, ...rest })
return createUtilityPlugin(
'rotate',
[['rotate', ['--tw-rotate', ['transform', 'var(--tw-transform)']]]],
{
lolback(_value, { selector }) {
addBaseSelector(rest.memory, selector)
},
}
)({ config, ...rest })
} else {
return createUtilityPlugin('rotate', [['rotate', ['--tw-rotate']]])({ config, ...rest })
}

52
src/plugins/saturate.js
View file

@ -1,19 +1,41 @@
import { addBaseSelector } from './filter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
{
saturate: (value) => {
return {
'--tw-saturate': `saturate(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
return function ({ config, matchUtilities, theme, variants, memory }) {
if (config('mode') === 'jit') {
matchUtilities(
{
saturate: (value, { selector }) => {
addBaseSelector(memory, selector)
return {
'--tw-saturate': `saturate(${value})`,
filter: 'var(--tw-filter)',
}
},
},
},
{
values: theme('saturate'),
variants: variants('saturate'),
type: 'any',
}
)
{
values: theme('saturate'),
variants: variants('saturate'),
type: 'any',
}
)
} else {
matchUtilities(
{
saturate: (value) => {
return {
'--tw-saturate': `saturate(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
},
},
{
values: theme('saturate'),
variants: variants('saturate'),
type: 'any',
}
)
}
}
}

19
src/plugins/scale.js
View file

@ -1,15 +1,24 @@
import { addBaseSelector } from './transform'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return function ({ config, ...rest }) {
if (config('mode') === 'jit') {
return createUtilityPlugin('scale', [
['scale', ['--tw-scale-x', '--tw-scale-y', ['transform', 'var(--tw-transform)']]],
return createUtilityPlugin(
'scale',
[
['scale-x', ['--tw-scale-x', ['transform', 'var(--tw-transform)']]],
['scale-y', ['--tw-scale-y', ['transform', 'var(--tw-transform)']]],
['scale', ['--tw-scale-x', '--tw-scale-y', ['transform', 'var(--tw-transform)']]],
[
['scale-x', ['--tw-scale-x', ['transform', 'var(--tw-transform)']]],
['scale-y', ['--tw-scale-y', ['transform', 'var(--tw-transform)']]],
],
],
])({ config, ...rest })
{
lolback(_value, { selector }) {
addBaseSelector(rest.memory, selector)
},
}
)({ config, ...rest })
} else {
return createUtilityPlugin('scale', [
['scale', ['--tw-scale-x', '--tw-scale-y']],

44
src/plugins/sepia.js
View file

@ -1,15 +1,37 @@
import { addBaseSelector } from './filter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
{
sepia: (value) => {
return {
'--tw-sepia': `sepia(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
return function ({ config, matchUtilities, theme, variants, memory }) {
if (config('mode') === 'jit') {
matchUtilities(
{
sepia: (value, { selector }) => {
addBaseSelector(memory, selector)
return {
'--tw-sepia': `sepia(${value})`,
filter: 'var(--tw-filter)',
}
},
},
},
{ values: theme('sepia'), variants: variants('sepia'), type: 'any' }
)
{
values: theme('sepia'),
variants: variants('sepia'),
type: 'any',
}
)
} else {
matchUtilities(
{
sepia: (value) => {
return {
'--tw-sepia': `sepia(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
},
},
{ values: theme('sepia'), variants: variants('sepia'), type: 'any' }
)
}
}
}

17
src/plugins/skew.js
View file

@ -1,14 +1,23 @@
import { addBaseSelector } from './transform'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return function ({ config, ...rest }) {
if (config('mode') === 'jit') {
return createUtilityPlugin('skew', [
return createUtilityPlugin(
'skew',
[
['skew-x', ['--tw-skew-x', ['transform', 'var(--tw-transform)']]],
['skew-y', ['--tw-skew-y', ['transform', 'var(--tw-transform)']]],
[
['skew-x', ['--tw-skew-x', ['transform', 'var(--tw-transform)']]],
['skew-y', ['--tw-skew-y', ['transform', 'var(--tw-transform)']]],
],
],
])({ config, ...rest })
{
lolback(_value, { selector }) {
addBaseSelector(rest.memory, selector)
},
}
)({ config, ...rest })
} else {
return createUtilityPlugin('skew', [
[

60
src/plugins/transform.js
View file

@ -1,8 +1,15 @@
export default function () {
return function ({ config, addBase, addUtilities, variants }) {
if (config('mode') === 'jit') {
addBase({
'*, ::before, ::after': {
import postcss from 'postcss'
import parseObjectStyles from '../util/parseObjectStyles'
let baseRulesKey = Symbol()
export function addBaseSelector(memory, selector) {
let baseRoot = memory.get(baseRulesKey)
if (baseRoot.nodes.length === 0) {
baseRoot.append(
parseObjectStyles({
[selector]: {
'--tw-translate-x': '0',
'--tw-translate-y': '0',
'--tw-rotate': '0',
@ -21,13 +28,35 @@ export default function () {
].join(' '),
},
})
addUtilities(
)
} else {
baseRoot.nodes[0].selectors = [...baseRoot.nodes[0].selectors, selector]
}
}
export default function () {
return function ({ config, matchUtilities, addBase, addUtilities, variants, memory }) {
if (config('mode') === 'jit') {
let baseRoot = postcss.root()
memory.set(baseRulesKey, baseRoot)
addBase(baseRoot)
matchUtilities(
{
'.transform': {
transform: 'var(--tw-transform)',
transform: (value, { selector }) => {
if (value !== 'none') {
addBaseSelector(memory, selector)
}
return {
transform: value,
}
},
'.transform-cpu': {
'--tw-transform': [
},
{
values: {
DEFAULT: 'var(--tw-transform)',
cpu: [
'translateX(var(--tw-translate-x))',
'translateY(var(--tw-translate-y))',
'rotate(var(--tw-rotate))',
@ -36,9 +65,7 @@ export default function () {
'scaleX(var(--tw-scale-x))',
'scaleY(var(--tw-scale-y))',
].join(' '),
},
'.transform-gpu': {
'--tw-transform': [
gpu: [
'translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)',
'rotate(var(--tw-rotate))',
'skewX(var(--tw-skew-x))',
@ -46,10 +73,11 @@ export default function () {
'scaleX(var(--tw-scale-x))',
'scaleY(var(--tw-scale-y))',
].join(' '),
none: 'none',
},
'.transform-none': { transform: 'none' },
},
variants('transform')
variants: variants('transform'),
type: 'any',
}
)
} else {
addUtilities(

17
src/plugins/translate.js
View file

@ -1,14 +1,23 @@
import { addBaseSelector } from './transform'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return function ({ config, ...rest }) {
if (config('mode') === 'jit') {
return createUtilityPlugin('translate', [
return createUtilityPlugin(
'translate',
[
['translate-x', ['--tw-translate-x', ['transform', 'var(--tw-transform)']]],
['translate-y', ['--tw-translate-y', ['transform', 'var(--tw-transform)']]],
[
['translate-x', ['--tw-translate-x', ['transform', 'var(--tw-transform)']]],
['translate-y', ['--tw-translate-y', ['transform', 'var(--tw-transform)']]],
],
],
])({ config, ...rest })
{
lolback(_value, { selector }) {
addBaseSelector(rest.memory, selector)
},
}
)({ config, ...rest })
} else {
return createUtilityPlugin('translate', [
[