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

Inline test resources

Browse source
This commit is contained in:
Adam Wathan 2022-02-25 13:00:57 -05:00
parent d3e754adb4
commit d9bc25da6a
3 changed files with 59 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

90
tests/important-modifier.test.css
View file

@ -1,90 +0,0 @@
*,
::before,
::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
.\!container {
width: 100% !important;
}
@media (min-width: 640px) {
.\!container {
max-width: 640px !important;
}
}
@media (min-width: 768px) {
.\!container {
max-width: 768px !important;
}
}
@media (min-width: 1024px) {
.\!container {
max-width: 1024px !important;
}
}
@media (min-width: 1280px) {
.\!container {
max-width: 1280px !important;
}
}
@media (min-width: 1536px) {
.\!container {
max-width: 1536px !important;
}
}
.\!font-bold {
font-weight: 700 !important;
}
.hover\:\!text-center:hover {
text-align: center !important;
}
@media (min-width: 1024px) {
.lg\:\!opacity-50 {
opacity: 0.5 !important;
}
}
@media (min-width: 1280px) {
.xl\:focus\:disabled\:\!float-right:disabled:focus {
float: right !important;
}
}

5
tests/important-modifier.test.html
View file

@ -1,5 +0,0 @@
<div class="!container"></div>
<div class="!font-bold"></div>
<div class="hover:!text-center"></div>
<div class="lg:!opacity-50"></div>
<div class="xl:focus:disabled:!float-right"></div>

69
tests/important-modifier.test.js
View file

@ -1,26 +1,75 @@
import fs from 'fs'
import path from 'path'
import { run, css } from './util/run'
import { run, css, html } from './util/run'
test('important modifier', () => {
let config = {
important: false,
darkMode: 'class',
content: [path.resolve(__dirname, './important-modifier.test.html')],
content: [
{
raw: html`
<div class="!container"></div>
<div class="!font-bold"></div>
<div class="hover:!text-center"></div>
<div class="lg:!opacity-50"></div>
<div class="xl:focus:disabled:!float-right"></div>
<div class="!custom-parent-5"></div>
`,
},
],
corePlugins: { preflight: false },
}
let input = css`
@tailwind base;
@tailwind components;
@tailwind utilities;
`
return run(input, config).then((result) => {
let expectedPath = path.resolve(__dirname, './important-modifier.test.css')
let expected = fs.readFileSync(expectedPath, 'utf8')
expect(result.css).toMatchFormattedCss(expected)
expect(result.css).toMatchFormattedCss(css`
.\!container {
width: 100% !important;
}
@media (min-width: 640px) {
.\!container {
max-width: 640px !important;
}
}
@media (min-width: 768px) {
.\!container {
max-width: 768px !important;
}
}
@media (min-width: 1024px) {
.\!container {
max-width: 1024px !important;
}
}
@media (min-width: 1280px) {
.\!container {
max-width: 1280px !important;
}
}
@media (min-width: 1536px) {
.\!container {
max-width: 1536px !important;
}
}
.\!font-bold {
font-weight: 700 !important;
}
.hover\:\!text-center:hover {
text-align: center !important;
}
@media (min-width: 1024px) {
.lg\:\!opacity-50 {
opacity: 0.5 !important;
}
}
@media (min-width: 1280px) {
.xl\:focus\:disabled\:\!float-right:disabled:focus {
float: right !important;
}
}
`)
})
})