12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 |
- import selectorParser from 'postcss-selector-parser'
- import { run, html, css } from './util/run'
- test('modify selectors', () => {
- let config = {
- darkMode: 'class',
- content: [
- {
- raw: html`
- <div class="font-bold"></div>
- <div class="foo:font-bold"></div>
- <div class="foo:hover:font-bold"></div>
- <div class="sm:foo:font-bold"></div>
- <div class="md:foo:focus:font-bold"></div>
- <div class="markdown">
- <p>Lorem ipsum dolor sit amet...</p>
- </div>
- <div class="foo:markdown">
- <p>Lorem ipsum dolor sit amet...</p>
- </div>
- <div class="foo:visited:markdown">
- <p>Lorem ipsum dolor sit amet...</p>
- </div>
- <div class="lg:foo:disabled:markdown">
- <p>Lorem ipsum dolor sit amet...</p>
- </div>
- `,
- },
- ],
- corePlugins: { preflight: false },
- theme: {},
- plugins: [
- function ({ addVariant }) {
- addVariant('foo', ({ modifySelectors, separator }) => {
- modifySelectors(({ selector }) => {
- return selectorParser((selectors) => {
- selectors.walkClasses((classNode) => {
- classNode.value = `foo${separator}${classNode.value}`
- classNode.parent.insertBefore(classNode, selectorParser().astSync(`.foo `))
- })
- }).processSync(selector)
- })
- })
- },
- ],
- }
- let input = css`
- @tailwind components;
- @tailwind utilities;
- @layer components {
- .markdown > p {
- margin-top: 12px;
- }
- }
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .markdown > p {
- margin-top: 12px;
- }
- .font-bold {
- font-weight: 700;
- }
- .foo .foo\:markdown > p,
- .foo .foo\:visited\:markdown:visited > p {
- margin-top: 12px;
- }
- @media (min-width: 1024px) {
- .foo .lg\:foo\:disabled\:markdown:disabled > p {
- margin-top: 12px;
- }
- }
- .foo .foo\:font-bold,
- .foo .foo\:hover\:font-bold:hover {
- font-weight: 700;
- }
- @media (min-width: 640px) {
- .foo .sm\:foo\:font-bold {
- font-weight: 700;
- }
- }
- @media (min-width: 768px) {
- .foo .md\:foo\:focus\:font-bold:focus {
- font-weight: 700;
- }
- }
- `)
- })
- })
|