581cf6abcc
* Simplify CI, make oxide engine the default (#11281) * remove integration tests for the `stable` engine * make `integration-tests-oxide` the default integration tests workflow * remove unnecessary CACHE_PREFIX * drop `ci-stable.yml` workflow * make `CI — Oxide` the default + drop testing against 3.3 branch (since this is stable only) + remove unnecessary CACHE_PREFIX * drop `release-insiders-stable.yml` workflow * make `Release Insiders — Oxide` the default + change release channel to just `insiders` instead of `oxide-insders` * drop 3.3 branch from integration tests * change job name for insiders release This makes it consistent with the other job names * prep `release-oxide.yml` workflow to be the default workflow * add Tailwind Play update Currently commented out until we figure out how this will work exactly. * use `env.VERSION` for the version we want to release * drop `release-stable.yml` workflow * make `release-oxide.yml` the default `release.yml` workflow * inline "Calculate environment variables" step * cache node_modules and cargo related files/folders in the release step * always use the default CLI * drop oxide specific implementation * ensure we test `--postcss` in the CLI Even for the Oxide engine * always process `@import` rules * remove `generalizedModifiers` flag This was already enabled by default. This commits removes some of the outstanding references to it. * remove built-in peer dependencies for the CLI * drop unused esbuild dependency * fix type for `configBag` * setup Lightning CSS for the CLI * drop `cssnano` dependency We only used this in the CLI and we now use Lighting CSS which has this built in already. Therefore we can get rid of this as a dependency. * ensure `imported.css` file exists in integration tests * passthrough `options` to lightningcss Ideally we can read this from `result.map` instead. However this doesn't get filled in for whatever reason even though we use `map: {inline:true}`. You can run the `tests/cli.test.js`, and more specifically the `--postcss supports process options with custom config` test. * Always process CSS with Lightning CSS Some tests temporarily skipped. Autoprefixer removed from `postcss.config.js` stubs since vendor prefixing handled by Lightning. * Remove code for normalizing `@import "tailwindcss/*"` statements * ensure tailwind doesn't crash when a `tailwind.config.js` file is not present * add `log.group` to group multiple messages together with different types * remove engine specific checks in integration tests * remove unused imports/variables Make linting check happy * support `content: ['auto']` This will allow us to still use auto content detection, but since this is part of the `content` array, it also allows you to add custom paths if you want. E.g.: ```js content: ['auto', './node_modules/my-library/*.{jsx,tsx}'] ``` * ensure `content.files` is always an array This allows us to simplify some checks because 'auto' will now be part of the array instead of checking if `content.files` is auto or if it is an array containing 'auto'. * fix tests, ensure default config is not injected * simplify `auto` normalization * always use the defaultFullConfig No need to override the defaultFullConfig with `{content: 'auto'}` because this will be included in the default config already. * drop condition which ensured `files` was an empty array This is not needed anymore because when `content` is omitted it behaves as if it was set to `auto`. * drop removal of `content` We used to remove the `content` from the actual configuration files when using `tailwindcss init` for the oxide engine. This was to ensure that `auto content detection` was used instead (by default). But now it is always enabled by default therefore this is not needed anymore. * ensure setting `content: 'auto'` works * improve file cache handling We have to make sure that we get into the previous state whenver a test is done. We were using some `!fileCache[filePath]` checks, however we also used `null` as a sentinel value when something wasn't found. But, `null` is falsey as well so some checks where incorrect. Using a dedicated value and a `Map` makes this safer and more correct because we can now use `.has()`. * drop `cleanupFile`, `removeFile` will already take care of it * drop oxide check in `resolvedChangedContent` At this point the `context.tailwindConfig.content.files` is already fully resolved regardless of the engine we are in. * refactor `parseCandidateStringsFromFiles` strategy, to make use of a proper feature flag * use feature flag for sorting classes Once the Oxide engine is the default default, then we can drop this entirely because the result from the Rust parser will already be sorted. * drop `crosscheck` from tests where it is safe First pass of deleting `crosscheck`. These are all the places where we didn't have any differences between the Oxide and Stable engine. * replace `__OXIDE__` in corePlugins with feature flag * use `globalThis.__OXIDE__ ?? false` This will ensure that in places where we don't have `__OXIDE__` that we can still properly fallback to `false`. * use `flex` as the go-to utility when testing features * prefer `space-utilities` tests instead of `oxide` test * drop crosscheck check Since the `oxideParser` is disabled by default, all the tests can use the `stable` output. * use simple `false` default values for feature flag defaults * drop `__OXIDE__` injections in build scripts * use stable `flex` and `z-{...}` utilities instead of color utilities flex and z-index related utilities are more stable than the color utilities right now because the color utilities will use a raw color value or a combination with a css variable depending on a feature flag. * drop unused `ENGINE` environment variable * drop stable engine manifest files * drop `swap-engines` tooling --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
1916 lines
43 KiB
JavaScript
1916 lines
43 KiB
JavaScript
import createPlugin from '../src/public/create-plugin'
|
|
import { run, html, css, defaults } from './util/run'
|
|
|
|
test('plugins can create utilities with object syntax', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`<div class="custom-object-fill custom-object-contain custom-object-cover"></div>`,
|
|
},
|
|
],
|
|
plugins: [
|
|
function ({ addUtilities }) {
|
|
addUtilities({
|
|
'.custom-object-fill': {
|
|
'object-fit': 'fill',
|
|
},
|
|
'.custom-object-contain': {
|
|
'object-fit': 'contain',
|
|
},
|
|
'.custom-object-cover': {
|
|
'object-fit': 'cover',
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.custom-object-fill {
|
|
object-fit: fill;
|
|
}
|
|
.custom-object-contain {
|
|
object-fit: contain;
|
|
}
|
|
.custom-object-cover {
|
|
object-fit: cover;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('plugins can create utilities with arrays of objects', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`<div class="custom-object-fill custom-object-contain custom-object-cover"></div>`,
|
|
},
|
|
],
|
|
plugins: [
|
|
function ({ addUtilities }) {
|
|
addUtilities([
|
|
{
|
|
'.custom-object-fill': {
|
|
'object-fit': 'fill',
|
|
},
|
|
'.custom-object-contain': {
|
|
'object-fit': 'contain',
|
|
},
|
|
'.custom-object-cover': {
|
|
'object-fit': 'cover',
|
|
},
|
|
},
|
|
])
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.custom-object-fill {
|
|
object-fit: fill;
|
|
}
|
|
.custom-object-contain {
|
|
object-fit: contain;
|
|
}
|
|
.custom-object-cover {
|
|
object-fit: cover;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('plugins can create utilities with raw PostCSS nodes', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`<div class="custom-object-fill custom-object-contain custom-object-cover"></div>`,
|
|
},
|
|
],
|
|
plugins: [
|
|
function ({ addUtilities, postcss }) {
|
|
addUtilities([
|
|
postcss.rule({ selector: '.custom-object-fill' }).append([
|
|
postcss.decl({
|
|
prop: 'object-fit',
|
|
value: 'fill',
|
|
}),
|
|
]),
|
|
postcss.rule({ selector: '.custom-object-contain' }).append([
|
|
postcss.decl({
|
|
prop: 'object-fit',
|
|
value: 'contain',
|
|
}),
|
|
]),
|
|
postcss.rule({ selector: '.custom-object-cover' }).append([
|
|
postcss.decl({
|
|
prop: 'object-fit',
|
|
value: 'cover',
|
|
}),
|
|
]),
|
|
])
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.custom-object-fill {
|
|
object-fit: fill;
|
|
}
|
|
.custom-object-contain {
|
|
object-fit: contain;
|
|
}
|
|
.custom-object-cover {
|
|
object-fit: cover;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('plugins can create utilities with mixed object styles and PostCSS nodes', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`<div class="custom-object-fill custom-object-contain custom-object-cover"></div>`,
|
|
},
|
|
],
|
|
plugins: [
|
|
function ({ addUtilities, postcss }) {
|
|
addUtilities([
|
|
{
|
|
'.custom-object-fill': {
|
|
objectFit: 'fill',
|
|
},
|
|
},
|
|
postcss.rule({ selector: '.custom-object-contain' }).append([
|
|
postcss.decl({
|
|
prop: 'object-fit',
|
|
value: 'contain',
|
|
}),
|
|
]),
|
|
postcss.rule({ selector: '.custom-object-cover' }).append([
|
|
postcss.decl({
|
|
prop: 'object-fit',
|
|
value: 'cover',
|
|
}),
|
|
]),
|
|
])
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.custom-object-fill {
|
|
object-fit: fill;
|
|
}
|
|
.custom-object-contain {
|
|
object-fit: contain;
|
|
}
|
|
.custom-object-cover {
|
|
object-fit: cover;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('plugins can create components with object syntax', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`<button class="btn-blue"></button>`,
|
|
},
|
|
],
|
|
plugins: [
|
|
function ({ addComponents }) {
|
|
addComponents({
|
|
'.btn-blue': {
|
|
backgroundColor: 'blue',
|
|
color: 'white',
|
|
padding: '.5rem 1rem',
|
|
borderRadius: '.25rem',
|
|
},
|
|
'.btn-blue:hover': {
|
|
backgroundColor: 'darkblue',
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind components', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.btn-blue {
|
|
color: #fff;
|
|
background-color: #00f;
|
|
border-radius: 0.25rem;
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
.btn-blue:hover {
|
|
background-color: #00008b;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('plugins can add base styles with object syntax', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`<img /><button></button>`,
|
|
},
|
|
],
|
|
plugins: [
|
|
function ({ addBase }) {
|
|
addBase({
|
|
img: {
|
|
maxWidth: '100%',
|
|
},
|
|
button: {
|
|
fontFamily: 'inherit',
|
|
},
|
|
})
|
|
},
|
|
],
|
|
corePlugins: { preflight: false },
|
|
}
|
|
|
|
return run('@tailwind base', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
button {
|
|
font-family: inherit;
|
|
}
|
|
${defaults}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('plugins can add base styles with raw PostCSS nodes', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`<img /><button></button>`,
|
|
},
|
|
],
|
|
plugins: [
|
|
function ({ addBase, postcss }) {
|
|
addBase([
|
|
postcss.rule({ selector: 'img' }).append([
|
|
postcss.decl({
|
|
prop: 'max-width',
|
|
value: '100%',
|
|
}),
|
|
]),
|
|
postcss.rule({ selector: 'button' }).append([
|
|
postcss.decl({
|
|
prop: 'font-family',
|
|
value: 'inherit',
|
|
}),
|
|
]),
|
|
])
|
|
},
|
|
],
|
|
corePlugins: { preflight: false },
|
|
}
|
|
|
|
return run('@tailwind base', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
button {
|
|
font-family: inherit;
|
|
}
|
|
${defaults}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('plugins can create components with raw PostCSS nodes', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`<button class="btn-blue"></button>`,
|
|
},
|
|
],
|
|
plugins: [
|
|
function ({ addComponents, postcss }) {
|
|
addComponents([
|
|
postcss.rule({ selector: '.btn-blue' }).append([
|
|
postcss.decl({
|
|
prop: 'background-color',
|
|
value: 'blue',
|
|
}),
|
|
postcss.decl({
|
|
prop: 'color',
|
|
value: 'white',
|
|
}),
|
|
postcss.decl({
|
|
prop: 'padding',
|
|
value: '.5rem 1rem',
|
|
}),
|
|
postcss.decl({
|
|
prop: 'border-radius',
|
|
value: '.25rem',
|
|
}),
|
|
]),
|
|
postcss.rule({ selector: '.btn-blue:hover' }).append([
|
|
postcss.decl({
|
|
prop: 'background-color',
|
|
value: 'darkblue',
|
|
}),
|
|
]),
|
|
])
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind components', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.btn-blue {
|
|
color: #fff;
|
|
background-color: #00f;
|
|
border-radius: 0.25rem;
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
.btn-blue:hover {
|
|
background-color: #00008b;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('plugins can create components with mixed object styles and raw PostCSS nodes', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`<button class="btn-blue"></button>`,
|
|
},
|
|
],
|
|
plugins: [
|
|
function ({ addComponents, postcss }) {
|
|
addComponents([
|
|
postcss.rule({ selector: '.btn-blue' }).append([
|
|
postcss.decl({
|
|
prop: 'background-color',
|
|
value: 'blue',
|
|
}),
|
|
postcss.decl({
|
|
prop: 'color',
|
|
value: 'white',
|
|
}),
|
|
postcss.decl({
|
|
prop: 'padding',
|
|
value: '.5rem 1rem',
|
|
}),
|
|
postcss.decl({
|
|
prop: 'border-radius',
|
|
value: '.25rem',
|
|
}),
|
|
]),
|
|
{
|
|
'.btn-blue:hover': {
|
|
backgroundColor: 'darkblue',
|
|
},
|
|
},
|
|
])
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind components', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.btn-blue {
|
|
color: #fff;
|
|
background-color: #00f;
|
|
border-radius: 0.25rem;
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
.btn-blue:hover {
|
|
background-color: #00008b;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('plugins can create components with media queries with object syntax', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`<div class="custom-container"></div>`,
|
|
},
|
|
],
|
|
plugins: [
|
|
function ({ addComponents }) {
|
|
addComponents({
|
|
'.custom-container': {
|
|
width: '100%',
|
|
},
|
|
'@media (min-width: 100px)': {
|
|
'.custom-container': {
|
|
maxWidth: '100px',
|
|
},
|
|
},
|
|
'@media (min-width: 200px)': {
|
|
'.custom-container': {
|
|
maxWidth: '200px',
|
|
},
|
|
},
|
|
'@media (min-width: 300px)': {
|
|
'.custom-container': {
|
|
maxWidth: '300px',
|
|
},
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind components', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.custom-container {
|
|
width: 100%;
|
|
}
|
|
@media (min-width: 100px) {
|
|
.custom-container {
|
|
max-width: 100px;
|
|
}
|
|
}
|
|
@media (min-width: 200px) {
|
|
.custom-container {
|
|
max-width: 200px;
|
|
}
|
|
}
|
|
@media (min-width: 300px) {
|
|
.custom-container {
|
|
max-width: 300px;
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('media queries can be defined multiple times using objects-in-array syntax', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`<div class="custom-container"></div>
|
|
<button class="btn"></button>`,
|
|
},
|
|
],
|
|
plugins: [
|
|
function ({ addComponents }) {
|
|
addComponents([
|
|
{
|
|
'.custom-container': {
|
|
width: '100%',
|
|
},
|
|
'@media (min-width: 100px)': {
|
|
'.custom-container': {
|
|
maxWidth: '100px',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
'.btn': {
|
|
padding: '1rem .5rem',
|
|
display: 'block',
|
|
},
|
|
'@media (min-width: 100px)': {
|
|
'.btn': {
|
|
display: 'inline-block',
|
|
},
|
|
},
|
|
},
|
|
])
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind components', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.custom-container {
|
|
width: 100%;
|
|
}
|
|
@media (min-width: 100px) {
|
|
.custom-container {
|
|
max-width: 100px;
|
|
}
|
|
}
|
|
.btn {
|
|
padding: 1rem 0.5rem;
|
|
display: block;
|
|
}
|
|
@media (min-width: 100px) {
|
|
.btn {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('plugins can create nested rules', () => {
|
|
let config = {
|
|
content: [{ raw: html`<button class="btn-blue"></button>` }],
|
|
plugins: [
|
|
function ({ addComponents }) {
|
|
addComponents({
|
|
'.btn-blue': {
|
|
backgroundColor: 'blue',
|
|
color: 'white',
|
|
padding: '.5rem 1rem',
|
|
borderRadius: '.25rem',
|
|
'&:hover': {
|
|
backgroundColor: 'darkblue',
|
|
},
|
|
'@media (min-width: 500px)': {
|
|
'&:hover': {
|
|
backgroundColor: 'orange',
|
|
},
|
|
},
|
|
'> a': {
|
|
color: 'red',
|
|
},
|
|
'h1 &': {
|
|
color: 'purple',
|
|
},
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind components', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.btn-blue {
|
|
color: #fff;
|
|
background-color: #00f;
|
|
border-radius: 0.25rem;
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
.btn-blue:hover {
|
|
background-color: #00008b;
|
|
}
|
|
@media (min-width: 500px) {
|
|
.btn-blue:hover {
|
|
background-color: orange;
|
|
}
|
|
}
|
|
.btn-blue > a {
|
|
color: red;
|
|
}
|
|
h1 .btn-blue {
|
|
color: purple;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('plugins can create rules with escaped selectors', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="custom-top-1/4"></div>` }],
|
|
plugins: [
|
|
function ({ e, addUtilities }) {
|
|
addUtilities({
|
|
[`.${e('custom-top-1/4')}`]: {
|
|
top: '25%',
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.custom-top-1\/4 {
|
|
top: 25%;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('plugins can access the current config', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="custom-container"></div>` }],
|
|
plugins: [
|
|
function ({ addComponents, config }) {
|
|
let containerClasses = [
|
|
{
|
|
'.custom-container': {
|
|
width: '100%',
|
|
},
|
|
},
|
|
]
|
|
|
|
for (let maxWidth of Object.values(config('theme.customScreens'))) {
|
|
containerClasses.push({
|
|
[`@media (min-width: ${maxWidth})`]: {
|
|
'.custom-container': { maxWidth },
|
|
},
|
|
})
|
|
}
|
|
|
|
addComponents(containerClasses)
|
|
},
|
|
],
|
|
theme: {
|
|
customScreens: {
|
|
sm: '576px',
|
|
md: '768px',
|
|
lg: '992px',
|
|
xl: '1200px',
|
|
},
|
|
},
|
|
}
|
|
|
|
return run('@tailwind components', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.custom-container {
|
|
width: 100%;
|
|
}
|
|
@media (min-width: 576px) {
|
|
.custom-container {
|
|
max-width: 576px;
|
|
}
|
|
}
|
|
@media (min-width: 768px) {
|
|
.custom-container {
|
|
max-width: 768px;
|
|
}
|
|
}
|
|
@media (min-width: 992px) {
|
|
.custom-container {
|
|
max-width: 992px;
|
|
}
|
|
}
|
|
@media (min-width: 1200px) {
|
|
.custom-container {
|
|
max-width: 1200px;
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('plugins can check if corePlugins are enabled', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="test"></div>` }],
|
|
plugins: [
|
|
function ({ addUtilities, corePlugins }) {
|
|
addUtilities({
|
|
'.test': {
|
|
'text-color': corePlugins('textColor') ? 'true' : 'false',
|
|
opacity: corePlugins('opacity') ? 'true' : 'false',
|
|
},
|
|
})
|
|
},
|
|
],
|
|
corePlugins: { textColor: false },
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.test {
|
|
text-color: false;
|
|
opacity: true;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('plugins can check if corePlugins are enabled when using array white-listing', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="test"></div>` }],
|
|
plugins: [
|
|
function ({ addUtilities, corePlugins }) {
|
|
addUtilities({
|
|
'.test': {
|
|
'text-color': corePlugins('textColor') ? 'true' : 'false',
|
|
opacity: corePlugins('opacity') ? 'true' : 'false',
|
|
},
|
|
})
|
|
},
|
|
],
|
|
corePlugins: ['textColor'],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.test {
|
|
text-color: true;
|
|
opacity: false;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('plugins can provide fallbacks to keys missing from the config', () => {
|
|
let config = {
|
|
content: [{ raw: html`<button class="btn"></button>` }],
|
|
plugins: [
|
|
function ({ addComponents, config }) {
|
|
addComponents({
|
|
'.btn': {
|
|
borderRadius: config('borderRadius.default', '.25rem'),
|
|
},
|
|
})
|
|
},
|
|
],
|
|
theme: {
|
|
borderRadius: {
|
|
1: '1px',
|
|
2: '2px',
|
|
4: '4px',
|
|
8: '8px',
|
|
},
|
|
},
|
|
}
|
|
|
|
return run('@tailwind components', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.btn {
|
|
border-radius: 0.25rem;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('plugins can add multiple sets of utilities and components', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`<button class="btn"></button>
|
|
<div class="card custom-skew-12deg custom-border-collapse"></div>`,
|
|
},
|
|
],
|
|
plugins: [
|
|
function ({ addUtilities, addComponents }) {
|
|
addComponents({
|
|
'.card': {
|
|
padding: '1rem',
|
|
borderRadius: '.25rem',
|
|
},
|
|
})
|
|
|
|
addUtilities({
|
|
'.custom-skew-12deg': {
|
|
transform: 'skewY(-12deg)',
|
|
},
|
|
})
|
|
|
|
addComponents({
|
|
'.btn': {
|
|
padding: '1rem .5rem',
|
|
display: 'inline-block',
|
|
},
|
|
})
|
|
|
|
addUtilities({
|
|
'.custom-border-collapse': {
|
|
borderCollapse: 'collapse',
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind components; @tailwind utilities;', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.card {
|
|
border-radius: 0.25rem;
|
|
padding: 1rem;
|
|
}
|
|
.btn {
|
|
padding: 1rem 0.5rem;
|
|
display: inline-block;
|
|
}
|
|
.custom-skew-12deg {
|
|
transform: skewY(-12deg);
|
|
}
|
|
.custom-border-collapse {
|
|
border-collapse: collapse;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('plugins respect prefix and important options by default when adding utilities', () => {
|
|
let config = {
|
|
prefix: 'tw-',
|
|
important: true,
|
|
content: [{ raw: html`<div class="tw-custom-rotate-90"></div>` }],
|
|
plugins: [
|
|
function ({ addUtilities }) {
|
|
addUtilities({
|
|
'.custom-rotate-90': {
|
|
transform: 'rotate(90deg)',
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.tw-custom-rotate-90 {
|
|
transform: rotate(90deg) !important;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('when important is a selector it is used to scope utilities instead of adding !important', () => {
|
|
let config = {
|
|
prefix: 'tw-',
|
|
important: '#app',
|
|
content: [{ raw: html`<div class="tw-custom-rotate-90"></div>` }],
|
|
plugins: [
|
|
function ({ addUtilities }) {
|
|
addUtilities({
|
|
'.custom-rotate-90': {
|
|
transform: 'rotate(90deg)',
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
#app .tw-custom-rotate-90 {
|
|
transform: rotate(90deg);
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('when important is a selector it scopes all selectors in a rule, even though defining utilities like this is stupid', () => {
|
|
let config = {
|
|
important: '#app',
|
|
content: [{ raw: html`<div class="custom-rotate-90 custom-rotate-1/4"></div>` }],
|
|
plugins: [
|
|
function ({ addUtilities }) {
|
|
addUtilities({
|
|
'.custom-rotate-90, .custom-rotate-1\\/4': {
|
|
transform: 'rotate(90deg)',
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
#app .custom-rotate-90,
|
|
#app .custom-rotate-1\/4 {
|
|
transform: rotate(90deg);
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('important utilities are not made double important when important option is used', () => {
|
|
let config = {
|
|
important: true,
|
|
content: [{ raw: html`<div class="custom-rotate-90"></div>` }],
|
|
plugins: [
|
|
function ({ addUtilities }) {
|
|
addUtilities({
|
|
'.custom-rotate-90': {
|
|
transform: 'rotate(90deg) !important',
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.custom-rotate-90 {
|
|
transform: rotate(90deg) !important;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test("component declarations respect the 'prefix' option by default", () => {
|
|
let config = {
|
|
prefix: 'tw-',
|
|
content: [{ raw: html`<button class="tw-btn-blue"></button>` }],
|
|
plugins: [
|
|
function ({ addComponents }) {
|
|
addComponents({
|
|
'.btn-blue': {
|
|
backgroundColor: 'blue',
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind components', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.tw-btn-blue {
|
|
background-color: #00f;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('all selectors in a rule are prefixed', () => {
|
|
let config = {
|
|
prefix: 'tw-',
|
|
content: [
|
|
{
|
|
raw: html`<button class="tw-btn-blue tw-btn-red"></button>
|
|
<div class="tw-custom-rotate-90 tw-custom-rotate-1/4"></div>`,
|
|
},
|
|
],
|
|
plugins: [
|
|
function ({ addUtilities, addComponents }) {
|
|
addUtilities({
|
|
'.custom-rotate-90, .custom-rotate-1\\/4': {
|
|
transform: 'rotate(90deg)',
|
|
},
|
|
})
|
|
addComponents({
|
|
'.btn-blue, .btn-red': {
|
|
padding: '10px',
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind components', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.tw-btn-blue,
|
|
.tw-btn-red {
|
|
padding: 10px;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test("component declarations can optionally ignore 'prefix' option", () => {
|
|
let config = {
|
|
prefix: 'tw-',
|
|
content: [{ raw: html`<button class="btn-blue"></button>` }],
|
|
plugins: [
|
|
function ({ addComponents }) {
|
|
addComponents(
|
|
{
|
|
'.btn-blue': {
|
|
backgroundColor: 'blue',
|
|
},
|
|
},
|
|
{ respectPrefix: false }
|
|
)
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind components', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.btn-blue {
|
|
background-color: #00f;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test("component declarations are not affected by the 'important' option", () => {
|
|
let config = {
|
|
important: true,
|
|
content: [{ raw: html`<button class="btn-blue"></button>` }],
|
|
plugins: [
|
|
function ({ addComponents }) {
|
|
addComponents({
|
|
'.btn-blue': {
|
|
backgroundColor: 'blue',
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind components', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.btn-blue {
|
|
background-color: #00f;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test("plugins can apply the user's chosen prefix to components manually", () => {
|
|
let config = {
|
|
prefix: 'tw-',
|
|
content: [{ raw: html`<button class="tw-btn-blue"></button>` }],
|
|
plugins: [
|
|
function ({ addComponents, prefix }) {
|
|
addComponents(
|
|
{
|
|
[prefix('.btn-blue')]: {
|
|
backgroundColor: 'blue',
|
|
},
|
|
},
|
|
{ respectPrefix: false }
|
|
)
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind components', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.tw-btn-blue {
|
|
background-color: #00f;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('prefix can optionally be ignored for utilities', () => {
|
|
let config = {
|
|
prefix: 'tw-',
|
|
content: [{ raw: html`<div class="custom-rotate-90"></div>` }],
|
|
plugins: [
|
|
function ({ addUtilities }) {
|
|
addUtilities(
|
|
{
|
|
'.custom-rotate-90': {
|
|
transform: 'rotate(90deg)',
|
|
},
|
|
},
|
|
{ respectPrefix: false }
|
|
)
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.custom-rotate-90 {
|
|
transform: rotate(90deg);
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('important can optionally be ignored for utilities', () => {
|
|
let config = {
|
|
important: true,
|
|
content: [{ raw: html`<div class="custom-rotate-90"></div>` }],
|
|
plugins: [
|
|
function ({ addUtilities }) {
|
|
addUtilities(
|
|
{
|
|
'.custom-rotate-90': {
|
|
transform: 'rotate(90deg)',
|
|
},
|
|
},
|
|
{ respectImportant: false }
|
|
)
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.custom-rotate-90 {
|
|
transform: rotate(90deg);
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('prefix will prefix all classes in a selector', () => {
|
|
let config = {
|
|
prefix: 'tw-',
|
|
content: [{ raw: html`<div class="tw-btn-blue tw-w-1/4"></div>` }],
|
|
plugins: [
|
|
function ({ addComponents, prefix }) {
|
|
addComponents(
|
|
{
|
|
[prefix('.btn-blue .w-1\\/4 > h1.text-xl + a .bar')]: {
|
|
backgroundColor: 'blue',
|
|
},
|
|
},
|
|
{ respectPrefix: false }
|
|
)
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind components', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.tw-btn-blue .tw-w-1\/4 > h1.tw-text-xl + a .tw-bar {
|
|
background-color: #00f;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('plugins can be provided as an object with a handler function', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`<div class="custom-object-fill custom-object-contain custom-object-cover"></div>`,
|
|
},
|
|
],
|
|
plugins: [
|
|
{
|
|
handler({ addUtilities }) {
|
|
addUtilities({
|
|
'.custom-object-fill': {
|
|
'object-fit': 'fill',
|
|
},
|
|
'.custom-object-contain': {
|
|
'object-fit': 'contain',
|
|
},
|
|
'.custom-object-cover': {
|
|
'object-fit': 'cover',
|
|
},
|
|
})
|
|
},
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.custom-object-fill {
|
|
object-fit: fill;
|
|
}
|
|
.custom-object-contain {
|
|
object-fit: contain;
|
|
}
|
|
.custom-object-cover {
|
|
object-fit: cover;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('plugins can provide a config but no handler', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`<div
|
|
class="tw-custom-object-fill tw-custom-object-contain tw-custom-object-cover"
|
|
></div>`,
|
|
},
|
|
],
|
|
plugins: [
|
|
{
|
|
config: {
|
|
prefix: 'tw-',
|
|
},
|
|
},
|
|
{
|
|
handler({ addUtilities }) {
|
|
addUtilities({
|
|
'.custom-object-fill': {
|
|
'object-fit': 'fill',
|
|
},
|
|
'.custom-object-contain': {
|
|
'object-fit': 'contain',
|
|
},
|
|
'.custom-object-cover': {
|
|
'object-fit': 'cover',
|
|
},
|
|
})
|
|
},
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.tw-custom-object-fill {
|
|
object-fit: fill;
|
|
}
|
|
.tw-custom-object-contain {
|
|
object-fit: contain;
|
|
}
|
|
.tw-custom-object-cover {
|
|
object-fit: cover;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('plugins can be created using the `createPlugin` function', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="test-sm test-md test-lg hover:test-sm sm:test-sm"></div>` }],
|
|
corePlugins: [],
|
|
theme: {
|
|
screens: {
|
|
sm: '400px',
|
|
},
|
|
},
|
|
plugins: [
|
|
createPlugin(
|
|
function ({ addUtilities, theme }) {
|
|
addUtilities(
|
|
Object.fromEntries(
|
|
Object.entries(theme('testPlugin')).map(([k, v]) => [
|
|
`.test-${k}`,
|
|
{ testProperty: v },
|
|
])
|
|
)
|
|
)
|
|
},
|
|
{
|
|
theme: {
|
|
testPlugin: {
|
|
sm: '1rem',
|
|
md: '2rem',
|
|
lg: '3rem',
|
|
},
|
|
},
|
|
}
|
|
),
|
|
],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.test-sm {
|
|
test-property: 1rem;
|
|
}
|
|
.test-md {
|
|
test-property: 2rem;
|
|
}
|
|
.test-lg {
|
|
test-property: 3rem;
|
|
}
|
|
.hover\:test-sm:hover {
|
|
test-property: 1rem;
|
|
}
|
|
@media (min-width: 400px) {
|
|
.sm\:test-sm {
|
|
test-property: 1rem;
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('plugins with extra options can be created using the `createPlugin.withOptions` function', () => {
|
|
let plugin = createPlugin.withOptions(
|
|
function ({ className }) {
|
|
return function ({ addUtilities, theme }) {
|
|
addUtilities(
|
|
Object.fromEntries(
|
|
Object.entries(theme('testPlugin')).map(([k, v]) => [
|
|
`.${className}-${k}`,
|
|
{ testProperty: v },
|
|
])
|
|
)
|
|
)
|
|
}
|
|
},
|
|
function () {
|
|
return {
|
|
theme: {
|
|
testPlugin: {
|
|
sm: '1rem',
|
|
md: '2rem',
|
|
lg: '3rem',
|
|
},
|
|
},
|
|
}
|
|
}
|
|
)
|
|
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`<div class="banana-sm banana-md banana-lg hover:banana-sm sm:banana-sm"></div>`,
|
|
},
|
|
],
|
|
corePlugins: [],
|
|
theme: {
|
|
screens: {
|
|
sm: '400px',
|
|
},
|
|
},
|
|
plugins: [plugin({ className: 'banana' })],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.banana-sm {
|
|
test-property: 1rem;
|
|
}
|
|
.banana-md {
|
|
test-property: 2rem;
|
|
}
|
|
.banana-lg {
|
|
test-property: 3rem;
|
|
}
|
|
.hover\:banana-sm:hover {
|
|
test-property: 1rem;
|
|
}
|
|
@media (min-width: 400px) {
|
|
.sm\:banana-sm {
|
|
test-property: 1rem;
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('plugins should cache correctly', () => {
|
|
let plugin = createPlugin.withOptions(({ className = 'banana' } = {}) => ({ addComponents }) => {
|
|
addComponents({ [`.${className}`]: { position: 'absolute' } })
|
|
})
|
|
|
|
let config = {
|
|
content: [{ raw: html`<div class="banana sm:banana apple sm:apple"></div>` }],
|
|
corePlugins: [],
|
|
theme: {
|
|
screens: {
|
|
sm: '400px',
|
|
},
|
|
},
|
|
}
|
|
|
|
function internalRun(options = {}) {
|
|
return run('@tailwind components', {
|
|
...config,
|
|
plugins: [plugin(options)],
|
|
})
|
|
}
|
|
|
|
return Promise.all([internalRun(), internalRun({ className: 'apple' })]).then(
|
|
([result1, result2]) => {
|
|
let expected1 = css`
|
|
.banana {
|
|
position: absolute;
|
|
}
|
|
@media (min-width: 400px) {
|
|
.sm\:banana {
|
|
position: absolute;
|
|
}
|
|
}
|
|
`
|
|
|
|
let expected2 = css`
|
|
.apple {
|
|
position: absolute;
|
|
}
|
|
@media (min-width: 400px) {
|
|
.sm\:apple {
|
|
position: absolute;
|
|
}
|
|
}
|
|
`
|
|
|
|
expect(result1.css).toMatchCss(expected1)
|
|
expect(result2.css).toMatchCss(expected2)
|
|
}
|
|
)
|
|
})
|
|
|
|
test('plugins created using `createPlugin.withOptions` do not need to be invoked if the user wants to use the default options', () => {
|
|
let plugin = createPlugin.withOptions(
|
|
function ({ className } = { className: 'banana' }) {
|
|
return function ({ addUtilities, theme }) {
|
|
addUtilities(
|
|
Object.fromEntries(
|
|
Object.entries(theme('testPlugin')).map(([k, v]) => [
|
|
`.${className}-${k}`,
|
|
{ testProperty: v },
|
|
])
|
|
)
|
|
)
|
|
}
|
|
},
|
|
function () {
|
|
return {
|
|
theme: {
|
|
testPlugin: {
|
|
sm: '1rem',
|
|
md: '2rem',
|
|
lg: '3rem',
|
|
},
|
|
},
|
|
}
|
|
}
|
|
)
|
|
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`<div class="banana-sm banana-md banana-lg hover:banana-sm sm:banana-sm"></div>`,
|
|
},
|
|
],
|
|
corePlugins: [],
|
|
theme: {
|
|
screens: {
|
|
sm: '400px',
|
|
},
|
|
},
|
|
plugins: [plugin],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.banana-sm {
|
|
test-property: 1rem;
|
|
}
|
|
.banana-md {
|
|
test-property: 2rem;
|
|
}
|
|
.banana-lg {
|
|
test-property: 3rem;
|
|
}
|
|
.hover\:banana-sm:hover {
|
|
test-property: 1rem;
|
|
}
|
|
@media (min-width: 400px) {
|
|
.sm\:banana-sm {
|
|
test-property: 1rem;
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('the configFunction parameter is optional when using the `createPlugin.withOptions` function', () => {
|
|
let plugin = createPlugin.withOptions(function ({ className }) {
|
|
return function ({ addUtilities, theme }) {
|
|
addUtilities(
|
|
Object.fromEntries(
|
|
Object.entries(theme('testPlugin')).map(([k, v]) => [
|
|
`.${className}-${k}`,
|
|
{ testProperty: v },
|
|
])
|
|
)
|
|
)
|
|
}
|
|
})
|
|
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`<div class="banana-sm banana-md banana-lg hover:banana-sm sm:banana-sm"></div>`,
|
|
},
|
|
],
|
|
corePlugins: [],
|
|
theme: {
|
|
screens: {
|
|
sm: '400px',
|
|
},
|
|
testPlugin: {
|
|
sm: '1px',
|
|
md: '2px',
|
|
lg: '3px',
|
|
},
|
|
},
|
|
plugins: [plugin({ className: 'banana' })],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.banana-sm {
|
|
test-property: 1px;
|
|
}
|
|
.banana-md {
|
|
test-property: 2px;
|
|
}
|
|
.banana-lg {
|
|
test-property: 3px;
|
|
}
|
|
.hover\:banana-sm:hover {
|
|
test-property: 1px;
|
|
}
|
|
@media (min-width: 400px) {
|
|
.sm\:banana-sm {
|
|
test-property: 1px;
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('keyframes are not escaped', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="foo-[abc] md:foo-[def]"></div>` }],
|
|
corePlugins: { preflight: false },
|
|
plugins: [
|
|
function ({ matchUtilities }) {
|
|
matchUtilities({
|
|
foo: (value) => {
|
|
return {
|
|
[`@keyframes ${value}`]: {
|
|
'25.001%': {
|
|
color: 'black',
|
|
},
|
|
},
|
|
animation: `${value} 1s infinite`,
|
|
}
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
@keyframes abc {
|
|
25.001% {
|
|
color: #000;
|
|
}
|
|
}
|
|
.foo-\[abc\] {
|
|
animation: 1s infinite abc;
|
|
}
|
|
@media (min-width: 768px) {
|
|
@keyframes def {
|
|
25.001% {
|
|
color: #000;
|
|
}
|
|
}
|
|
.md\:foo-\[def\] {
|
|
animation: 1s infinite def;
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('font sizes are retrieved without default line-heights or letter-spacing using theme function', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="foo"></div>` }],
|
|
corePlugins: [],
|
|
theme: {
|
|
fontSize: {
|
|
sm: ['14px', '20px'],
|
|
},
|
|
},
|
|
plugins: [
|
|
function ({ addComponents, theme }) {
|
|
addComponents({
|
|
'.foo': {
|
|
fontSize: theme('fontSize.sm'),
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind components', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.foo {
|
|
font-size: 14px;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('outlines are retrieved without outline-offset using theme function', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="foo"></div>` }],
|
|
corePlugins: [],
|
|
theme: {
|
|
outline: {
|
|
black: ['2px dotted black', '4px'],
|
|
},
|
|
},
|
|
plugins: [
|
|
function ({ addComponents, theme }) {
|
|
addComponents({
|
|
'.foo': {
|
|
outline: theme('outline.black'),
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind components', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.foo {
|
|
outline: 2px dotted #000;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('box-shadow values are joined when retrieved using the theme function', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="foo"></div>` }],
|
|
corePlugins: [],
|
|
theme: {
|
|
boxShadow: {
|
|
lol: ['width', 'height'],
|
|
},
|
|
},
|
|
plugins: [
|
|
function ({ addComponents, theme }) {
|
|
addComponents({
|
|
'.foo': {
|
|
boxShadow: theme('boxShadow.lol'),
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind components', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.foo {
|
|
box-shadow: width, height;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('transition-property values are joined when retrieved using the theme function', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="foo"></div>` }],
|
|
corePlugins: [],
|
|
theme: {
|
|
transitionProperty: {
|
|
lol: ['width', 'height'],
|
|
},
|
|
},
|
|
plugins: [
|
|
function ({ addComponents, theme }) {
|
|
addComponents({
|
|
'.foo': {
|
|
transitionProperty: theme('transitionProperty.lol'),
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind components', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.foo {
|
|
transition-property: width, height;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('transition-duration values are joined when retrieved using the theme function', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="foo"></div>` }],
|
|
corePlugins: [],
|
|
theme: {
|
|
transitionDuration: {
|
|
lol: ['width', 'height'],
|
|
},
|
|
},
|
|
plugins: [
|
|
function ({ addComponents, theme }) {
|
|
addComponents({
|
|
'.foo': {
|
|
transitionDuration: theme('transitionDuration.lol'),
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind components', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.foo {
|
|
transition-duration: width, height;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('transition-delay values are joined when retrieved using the theme function', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="foo"></div>` }],
|
|
corePlugins: [],
|
|
theme: {
|
|
transitionDuration: {
|
|
lol: ['width', 'height'],
|
|
},
|
|
},
|
|
plugins: [
|
|
function ({ addComponents, theme }) {
|
|
addComponents({
|
|
'.foo': {
|
|
transitionDuration: theme('transitionDuration.lol'),
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind components', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.foo {
|
|
transition-duration: width, height;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('transition-timing-function values are joined when retrieved using the theme function', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="foo"></div>` }],
|
|
corePlugins: [],
|
|
theme: {
|
|
transitionTimingFunction: {
|
|
lol: ['width', 'height'],
|
|
},
|
|
},
|
|
plugins: [
|
|
function ({ addComponents, theme }) {
|
|
addComponents({
|
|
'.foo': {
|
|
transitionTimingFunction: theme('transitionTimingFunction.lol'),
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind components', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.foo {
|
|
transition-timing-function: width, height;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('background-image values are joined when retrieved using the theme function', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="foo"></div>` }],
|
|
corePlugins: [],
|
|
theme: {
|
|
backgroundImage: {
|
|
lol: ['width', 'height'],
|
|
},
|
|
},
|
|
plugins: [
|
|
function ({ addComponents, theme }) {
|
|
addComponents({
|
|
'.foo': {
|
|
backgroundImage: theme('backgroundImage.lol'),
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind components', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.foo {
|
|
background-image: width, height;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('background-size values are joined when retrieved using the theme function', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="foo"></div>` }],
|
|
corePlugins: [],
|
|
theme: {
|
|
backgroundSize: {
|
|
lol: ['width', 'height'],
|
|
},
|
|
},
|
|
plugins: [
|
|
function ({ addComponents, theme }) {
|
|
addComponents({
|
|
'.foo': {
|
|
backgroundSize: theme('backgroundSize.lol'),
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind components', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.foo {
|
|
background-size: width, height;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('background-color values are joined when retrieved using the theme function', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="foo"></div>` }],
|
|
corePlugins: [],
|
|
theme: {
|
|
backgroundColor: {
|
|
lol: ['width', 'height'],
|
|
},
|
|
},
|
|
plugins: [
|
|
function ({ addComponents, theme }) {
|
|
addComponents({
|
|
'.foo': {
|
|
backgroundColor: theme('backgroundColor.lol'),
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind components', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.foo {
|
|
background-color: width, height;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('cursor values are joined when retrieved using the theme function', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="foo"></div>` }],
|
|
corePlugins: [],
|
|
theme: {
|
|
cursor: {
|
|
lol: ['width', 'height'],
|
|
},
|
|
},
|
|
plugins: [
|
|
function ({ addComponents, theme }) {
|
|
addComponents({
|
|
'.foo': {
|
|
cursor: theme('cursor.lol'),
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind components', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.foo {
|
|
cursor: width, height;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('animation values are joined when retrieved using the theme function', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="foo"></div>` }],
|
|
corePlugins: [],
|
|
theme: {
|
|
animation: {
|
|
lol: ['width', 'height'],
|
|
},
|
|
},
|
|
plugins: [
|
|
function ({ addComponents, theme }) {
|
|
addComponents({
|
|
'.foo': {
|
|
animation: theme('animation.lol'),
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind components', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.foo {
|
|
animation: width, height;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('custom properties are not converted to kebab-case when added to base layer', () => {
|
|
let config = {
|
|
content: [],
|
|
plugins: [
|
|
function ({ addBase }) {
|
|
addBase({
|
|
':root': {
|
|
'--colors-primaryThing-500': '0, 0, 255',
|
|
},
|
|
})
|
|
},
|
|
],
|
|
}
|
|
|
|
return run('@tailwind base', config).then((result) => {
|
|
expect(result.css).toContain(`--colors-primaryThing-500: 0, 0, 255;`)
|
|
})
|
|
})
|