diff --git a/global.d.ts b/global.d.ts index ee8b054..252587a 100644 --- a/global.d.ts +++ b/global.d.ts @@ -42,6 +42,9 @@ declare global { | 'angular' | 'html' | 'vue' + | 'css' + | 'scss' + | 'less' | 'oxc' | 'oxc-ts' | 'astro' diff --git a/src/core-parts/finder.ts b/src/core-parts/finder.ts index a7d658b..f92c0e9 100644 --- a/src/core-parts/finder.ts +++ b/src/core-parts/finder.ts @@ -1684,6 +1684,62 @@ function handleAstroElement(ctx: CaseHandlerContext) { } } +function handleCssCssAtrule(ctx: CaseHandlerContext) { + ctx.nonCommentNodes.push(ctx.currentASTNode); + + if ( + isTypeof( + ctx.node, + z.object({ + name: z.literal('apply'), + nodes: z.undefined(), + raws: z.object({ + afterName: z.string(), + params: z.string(), + }), + source: z.object({ + start: z.object({ + line: z.number(), + }), + }), + }), + ) + ) { + // Note: In fact, the `@apply` rule is not a `keywordStartingNode`, but it is considered a kind of safe list to maintain the `classNameNode`s obtained from the code inside the rule. + ctx.keywordStartingNodes.push(ctx.currentASTNode); + + const offset = '@apply'.length; + + const classNameNodeRangeStart = ctx.currentASTNode.start + offset; + const classNameNodeRangeEnd = ctx.currentASTNode.end; + + const nodeStartLineIndex = ctx.node.source.start.line - 1; + + // Note: In fact, since CSS code does not have a delimiter, it might be better to create a new node type. However, if we consider the characters on the left and right of the class name as a delimiter, the formatting method is the same as AttributeNode, so I have processed it as an AttributeNode type for now. + ctx.classNameNodes.push({ + type: 'attribute', + isTheFirstLineOnTheSameLineAsTheOpeningTag: true, + elementName: '', + range: [classNameNodeRangeStart, classNameNodeRangeEnd], + startLineIndex: nodeStartLineIndex, + }); + } +} + +function handleCssCssComment(ctx: CaseHandlerContext) { + if ( + isTypeof( + ctx.node, + z.object({ + text: z.string(), + }), + ) && + ctx.node.text.trim() === 'prettier-ignore' + ) { + ctx.prettierIgnoreNodes.push(ctx.currentASTNode); + } +} + function handleAstroFrontmatter(ctx: CaseHandlerContext) { ctx.nonCommentNodes.push(ctx.currentASTNode); @@ -1747,6 +1803,11 @@ const typescriptCaseHandlers: CaseHandlers = { Line: handleTypeScriptBlock, }; +const cssCaseHandlers: CaseHandlers = { + 'css-atrule': handleCssCssAtrule, + 'css-comment': handleCssCssComment, +}; + const parserCaseHandlers: ParserCaseHandlers = { babel: { ...babelCaseHandlers, @@ -1800,6 +1861,15 @@ const parserCaseHandlers: ParserCaseHandlers = { element: handleAngularElement, comment: handleHtmlComment, }, + css: { + ...cssCaseHandlers, + }, + scss: { + ...cssCaseHandlers, + }, + less: { + ...cssCaseHandlers, + }, astro: { frontmatter: handleAstroFrontmatter, attribute: handleAstroAttribute, @@ -2190,6 +2260,121 @@ export function findTargetClassNameNodesBasedOnHtml( ); } +export function findTargetClassNameNodesBasedOnCss( + formattedText: string, + ast: AST, + options: ResolvedOptions, +): ClassNameNode[] { + const supportedAttributes: string[] = ['class', 'className', ...options.customAttributes]; + const supportedFunctions: string[] = ['classNames', ...options.customFunctions]; + /** + * Most nodes + */ + const nonCommentNodes: ASTNode[] = []; + /** + * Nodes with a valid 'prettier-ignore' syntax + */ + const prettierIgnoreNodes: ASTNode[] = []; + /** + * Nodes starting with supported attribute names or supported function names + */ + const keywordStartingNodes: ASTNode[] = []; + /** + * Class names enclosed in delimiters + */ + const classNameNodes: ClassNameNode[] = []; + + function recursion(node: unknown, parentNode?: { type: string }): void { + if (!isTypeof(node, z.object({ type: z.string() }))) { + return; + } + + let recursiveProps: string[] = []; + + switch (node.type) { + case 'css-atrule': + case 'css-root': + case 'css-rule': { + recursiveProps = ['nodes']; + break; + } + default: { + break; + } + } + + Object.entries(node).forEach(([key, value]) => { + if (!recursiveProps.includes(key)) { + return; + } + + if (Array.isArray(value)) { + value.forEach((childNode: unknown) => { + recursion(childNode, node); + }); + return; + } + + recursion(value, node); + }); + + if ( + !isTypeof( + node, + z.object({ + source: z.object({ + startOffset: z.number(), + endOffset: z.number(), + }), + }), + ) + ) { + return; + } + + const nodeType = node.type; + const currentNodeRangeStart = node.source.startOffset; + const currentNodeRangeEnd = node.source.endOffset; + + const currentASTNode: ASTNode = { + type: nodeType, + start: currentNodeRangeStart, + end: currentNodeRangeEnd, + }; + + const handler = parserCaseHandlers[String(options.parser)]?.[nodeType]; + + if (handler) { + const context: CaseHandlerContext = { + formattedText, + options, + supportedAttributes, + supportedFunctions, + nonCommentNodes, + prettierIgnoreNodes, + keywordStartingNodes, + classNameNodes, + node, + parentNode, + currentASTNode, + }; + + handler(context); + } else { + nonCommentNodes.push(currentASTNode); + } + } + + recursion(ast); + + return filterAndSortClassNameNodes( + nonCommentNodes, + prettierIgnoreNodes, + keywordStartingNodes, + classNameNodes, + ); +} + export function findTargetClassNameNodesBasedOnAstro( formattedText: string, ast: AST, diff --git a/src/core-parts/processor.ts b/src/core-parts/processor.ts index 73e9c46..a175a7d 100644 --- a/src/core-parts/processor.ts +++ b/src/core-parts/processor.ts @@ -4,6 +4,7 @@ import type { AST } from 'prettier'; import { findTargetClassNameNodesBasedOnJavaScript, findTargetClassNameNodesBasedOnHtml, + findTargetClassNameNodesBasedOnCss, findTargetClassNameNodesBasedOnAstro, } from './finder'; import { @@ -645,6 +646,12 @@ export async function parseLineByLineAndReplaceAsync({ targetClassNameNodes = findTargetClassNameNodesBasedOnHtml(formattedText, ast, options); break; } + case 'css': + case 'scss': + case 'less': { + targetClassNameNodes = findTargetClassNameNodesBasedOnCss(formattedText, ast, options); + break; + } case 'astro': { targetClassNameNodes = findTargetClassNameNodesBasedOnAstro(formattedText, ast, options); break; diff --git a/src/parsers.ts b/src/parsers.ts index abbaf76..f36a369 100644 --- a/src/parsers.ts +++ b/src/parsers.ts @@ -2,6 +2,7 @@ import type { Parser, Plugin } from 'prettier'; import { format } from 'prettier'; import { parsers as babelParsers } from 'prettier/plugins/babel'; import { parsers as htmlParsers } from 'prettier/plugins/html'; +import { parsers as postcssParsers } from 'prettier/plugins/postcss'; import { parsers as typescriptParsers } from 'prettier/plugins/typescript'; import { advancedParse } from './core-parts/parser'; @@ -34,6 +35,7 @@ function transformParser( ...(refinedParser ?? {}), // @ts-expect-error parse: async (text: string, options: ResolvedOptions): Promise => { + // NOTE: This statement is deprecated and will be removed in version 0.12.0. There are still no plans to support the `markdown` and `mdx` parsers. I just thought it would be better to guide users to override Prettier's configuration rather than branching inside this plugin. if (options.parentParser === 'markdown' || options.parentParser === 'mdx') { let codeblockStart = '```'; const codeblockEnd = '```'; @@ -187,6 +189,15 @@ export const parsers: { [parserName: string]: Parser } = { vue: transformParser('vue', { defaultParser: htmlParsers.vue, }), + css: transformParser('css', { + defaultParser: postcssParsers.css, + }), + scss: transformParser('scss', { + defaultParser: postcssParsers.scss, + }), + less: transformParser('less', { + defaultParser: postcssParsers.less, + }), oxc: transformParser('oxc', { defaultParser: null, externalPluginName: '@prettier/plugin-oxc', diff --git a/tests/css/at-rule/__snapshots__/absolute.test.ts.snap b/tests/css/at-rule/__snapshots__/absolute.test.ts.snap new file mode 100644 index 0000000..50e3d3e --- /dev/null +++ b/tests/css/at-rule/__snapshots__/absolute.test.ts.snap @@ -0,0 +1,283 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'@color-profile' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@color-profile --swop5c { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +.header { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@container' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* A container context based on inline size */ +.post { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Apply styles if the container is narrower than 650px */ +@container (width < 650px) { + .card { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@counter-style' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@counter-style circled-alpha { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +.items { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@font-face' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@font-face { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +body { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@font-feature-values' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* At-rule for "nice-style" in Font One */ +@font-feature-values Font One { + @styleset { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} + +/* At-rule for "nice-style" in Font Two */ +@font-feature-values Font Two { + @styleset { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} + +/* Apply the at-rules with a single declaration */ +.nice-look { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@font-palette-values' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@import "https://fonts.googleapis.com/css2?family=Bungee+Spice"; +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +@font-palette-values --Alternate { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +.alternate { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@keyframes' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +@keyframes slide-in { + from { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } + + to { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@layer' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +@layer type { + .box p { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@media' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@media print { + body { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} + +@media screen { + body { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} + +@media screen, print { + body { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@page' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@page { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +section { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +@media print { + button { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@position-try' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@position-try --custom-left { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +@position-try --custom-bottom { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +@position-try --custom-right { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +@position-try --custom-bottom-right { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@property' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@property --myColor { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +@property --myWidth { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@scope' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@scope (.light-scheme) { + :scope { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } + + a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} + +@scope (.dark-scheme) { + :scope { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } + + a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@starting-style' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +#target { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +@starting-style { + #target { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@view-transition' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@view-transition { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/css/at-rule/__snapshots__/relative.test.ts.snap b/tests/css/at-rule/__snapshots__/relative.test.ts.snap new file mode 100644 index 0000000..95ad088 --- /dev/null +++ b/tests/css/at-rule/__snapshots__/relative.test.ts.snap @@ -0,0 +1,283 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'@color-profile' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@color-profile --swop5c { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +.header { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@container' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* A container context based on inline size */ +.post { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Apply styles if the container is narrower than 650px */ +@container (width < 650px) { + .card { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@counter-style' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@counter-style circled-alpha { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +.items { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@font-face' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@font-face { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +body { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@font-feature-values' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* At-rule for "nice-style" in Font One */ +@font-feature-values Font One { + @styleset { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} + +/* At-rule for "nice-style" in Font Two */ +@font-feature-values Font Two { + @styleset { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} + +/* Apply the at-rules with a single declaration */ +.nice-look { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@font-palette-values' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@import "https://fonts.googleapis.com/css2?family=Bungee+Spice"; +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +@font-palette-values --Alternate { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +.alternate { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@keyframes' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +@keyframes slide-in { + from { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + + to { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@layer' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +@layer type { + .box p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@media' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@media print { + body { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} + +@media screen { + body { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} + +@media screen, print { + body { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@page' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@page { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +section { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +@media print { + button { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@position-try' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@position-try --custom-left { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +@position-try --custom-bottom { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +@position-try --custom-right { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +@position-try --custom-bottom-right { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@property' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@property --myColor { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +@property --myWidth { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@scope' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@scope (.light-scheme) { + :scope { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + + a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} + +@scope (.dark-scheme) { + :scope { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + + a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@starting-style' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +#target { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +@starting-style { + #target { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@view-transition' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@view-transition { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/css/at-rule/absolute.test.ts b/tests/css/at-rule/absolute.test.ts new file mode 100644 index 0000000..0ff8229 --- /dev/null +++ b/tests/css/at-rule/absolute.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'css', + printWidth: 60, + endingPosition: 'absolute', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/css/at-rule/fixtures.ts b/tests/css/at-rule/fixtures.ts new file mode 100644 index 0000000..2b1db16 --- /dev/null +++ b/tests/css/at-rule/fixtures.ts @@ -0,0 +1,262 @@ +import type { Fixture } from '../../settings'; + +export const fixtures: Omit[] = [ + { + name: '@color-profile', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@color-profile --swop5c { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +.header { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '@container', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* A container context based on inline size */ +.post { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Apply styles if the container is narrower than 650px */ +@container (width < 650px) { + .card { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, + { + name: '@counter-style', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@counter-style circled-alpha { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +.items { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '@font-face', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@font-face { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +body { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '@font-feature-values', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* At-rule for "nice-style" in Font One */ +@font-feature-values Font One { + @styleset { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} + +/* At-rule for "nice-style" in Font Two */ +@font-feature-values Font Two { + @styleset { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} + +/* Apply the at-rules with a single declaration */ +.nice-look { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '@font-palette-values', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@import "https://fonts.googleapis.com/css2?family=Bungee+Spice"; +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +@font-palette-values --Alternate { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +.alternate { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '@keyframes', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +@keyframes slide-in { + from { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + + to { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, + { + name: '@layer', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +@layer type { + .box p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, + { + name: '@media', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@media print { + body { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} + +@media screen { + body { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} + +@media screen, print { + body { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, + { + name: '@page', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@page { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +section { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +@media print { + button { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, + { + name: '@position-try', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@position-try --custom-left { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +@position-try --custom-bottom { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +@position-try --custom-right { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +@position-try --custom-bottom-right { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '@property', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@property --myColor { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +@property --myWidth { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '@scope', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@scope (.light-scheme) { + :scope { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + + a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} + +@scope (.dark-scheme) { + :scope { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + + a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, + { + name: '@starting-style', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +#target { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +@starting-style { + #target { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, + { + name: '@view-transition', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@view-transition { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, +]; diff --git a/tests/css/at-rule/relative.test.ts b/tests/css/at-rule/relative.test.ts new file mode 100644 index 0000000..cd39bdf --- /dev/null +++ b/tests/css/at-rule/relative.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'css', + printWidth: 60, + endingPosition: 'relative', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/css/combinator/__snapshots__/absolute.test.ts.snap b/tests/css/combinator/__snapshots__/absolute.test.ts.snap new file mode 100644 index 0000000..3844a9d --- /dev/null +++ b/tests/css/combinator/__snapshots__/absolute.test.ts.snap @@ -0,0 +1,47 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'child combinator' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +span { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +div > span { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'descendant combinator' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +li { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +li li { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'next-sibling combinator' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +li:first-of-type + li { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'subsequent-sibling combinator' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p ~ span { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/css/combinator/__snapshots__/relative.test.ts.snap b/tests/css/combinator/__snapshots__/relative.test.ts.snap new file mode 100644 index 0000000..feea6dc --- /dev/null +++ b/tests/css/combinator/__snapshots__/relative.test.ts.snap @@ -0,0 +1,47 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'child combinator' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +span { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +div > span { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'descendant combinator' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +li { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +li li { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'next-sibling combinator' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +li:first-of-type + li { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'subsequent-sibling combinator' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p ~ span { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/css/combinator/absolute.test.ts b/tests/css/combinator/absolute.test.ts new file mode 100644 index 0000000..0ff8229 --- /dev/null +++ b/tests/css/combinator/absolute.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'css', + printWidth: 60, + endingPosition: 'absolute', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/css/combinator/fixtures.ts b/tests/css/combinator/fixtures.ts new file mode 100644 index 0000000..731a5a0 --- /dev/null +++ b/tests/css/combinator/fixtures.ts @@ -0,0 +1,48 @@ +import type { Fixture } from '../../settings'; + +export const fixtures: Omit[] = [ + { + name: 'child combinator', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +span { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +div > span { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: 'descendant combinator', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +li { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +li li { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: 'next-sibling combinator', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +li:first-of-type + li { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: 'subsequent-sibling combinator', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p ~ span { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, +]; diff --git a/tests/css/combinator/relative.test.ts b/tests/css/combinator/relative.test.ts new file mode 100644 index 0000000..cd39bdf --- /dev/null +++ b/tests/css/combinator/relative.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'css', + printWidth: 60, + endingPosition: 'relative', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/css/others/__snapshots__/absolute.test.ts.snap b/tests/css/others/__snapshots__/absolute.test.ts.snap new file mode 100644 index 0000000..27f720e --- /dev/null +++ b/tests/css/others/__snapshots__/absolute.test.ts.snap @@ -0,0 +1,57 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'endOfLine: crlf' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur + adipiscing elit proin ex massa hendrerit eu posuere; + } + } +} +" +`; + +exports[`'tabWidth: 4' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur + adipiscing elit proin ex massa hendrerit eu + posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur + adipiscing elit proin ex massa hendrerit eu + posuere; + } + } +} +" +`; + +exports[`'useTabs: true' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur + adipiscing elit proin ex massa hendrerit eu posuere; + } + } +} +" +`; diff --git a/tests/css/others/__snapshots__/relative.test.ts.snap b/tests/css/others/__snapshots__/relative.test.ts.snap new file mode 100644 index 0000000..713fdd1 --- /dev/null +++ b/tests/css/others/__snapshots__/relative.test.ts.snap @@ -0,0 +1,55 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'endOfLine: crlf' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + } +} +" +`; + +exports[`'tabWidth: 4' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + } +} +" +`; + +exports[`'useTabs: true' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + } +} +" +`; diff --git a/tests/css/others/absolute.test.ts b/tests/css/others/absolute.test.ts new file mode 100644 index 0000000..0ff8229 --- /dev/null +++ b/tests/css/others/absolute.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'css', + printWidth: 60, + endingPosition: 'absolute', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/css/others/fixtures.ts b/tests/css/others/fixtures.ts new file mode 100644 index 0000000..824abde --- /dev/null +++ b/tests/css/others/fixtures.ts @@ -0,0 +1,61 @@ +import type { Fixture } from '../../settings'; + +export const fixtures: Omit[] = [ + { + name: 'tabWidth: 4', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + } +} +`, + options: { + tabWidth: 4, + }, + }, + { + name: 'useTabs: true', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + } +} +`, + options: { + useTabs: true, + }, + }, + { + name: 'endOfLine: crlf', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + } +} +`, + options: { + endOfLine: 'crlf', + }, + }, +]; diff --git a/tests/css/others/relative.test.ts b/tests/css/others/relative.test.ts new file mode 100644 index 0000000..cd39bdf --- /dev/null +++ b/tests/css/others/relative.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'css', + printWidth: 60, + endingPosition: 'relative', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/css/prettier-ignore/__snapshots__/absolute.test.ts.snap b/tests/css/prettier-ignore/__snapshots__/absolute.test.ts.snap new file mode 100644 index 0000000..d4071df --- /dev/null +++ b/tests/css/prettier-ignore/__snapshots__/absolute.test.ts.snap @@ -0,0 +1,42 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'comments that contain the phrase \`pre…' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/** + * prettier-ignore + */ +h1, +h2, +h3, +h4, +h5, +h6 { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'ignore comment (1)' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* prettier-ignore */ +#blue { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } +" +`; + +exports[`'ignore comment (2)' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@keyframes slide-and-fade { + /* prettier-ignore */ + from { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } + 50% { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } + to { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; diff --git a/tests/css/prettier-ignore/__snapshots__/relative.test.ts.snap b/tests/css/prettier-ignore/__snapshots__/relative.test.ts.snap new file mode 100644 index 0000000..9d487a2 --- /dev/null +++ b/tests/css/prettier-ignore/__snapshots__/relative.test.ts.snap @@ -0,0 +1,42 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'comments that contain the phrase \`pre…' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/** + * prettier-ignore + */ +h1, +h2, +h3, +h4, +h5, +h6 { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'ignore comment (1)' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* prettier-ignore */ +#blue { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } +" +`; + +exports[`'ignore comment (2)' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@keyframes slide-and-fade { + /* prettier-ignore */ + from { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } + 50% { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + to { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; diff --git a/tests/css/prettier-ignore/absolute.test.ts b/tests/css/prettier-ignore/absolute.test.ts new file mode 100644 index 0000000..0ff8229 --- /dev/null +++ b/tests/css/prettier-ignore/absolute.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'css', + printWidth: 60, + endingPosition: 'absolute', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/css/prettier-ignore/fixtures.ts b/tests/css/prettier-ignore/fixtures.ts new file mode 100644 index 0000000..d78daa6 --- /dev/null +++ b/tests/css/prettier-ignore/fixtures.ts @@ -0,0 +1,36 @@ +import type { Fixture } from '../../settings'; + +export const fixtures: Omit[] = [ + { + name: 'ignore comment (1)', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* prettier-ignore */ +#blue { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } +`, + }, + { + name: 'ignore comment (2)', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@keyframes slide-and-fade { + /* prettier-ignore */ + from { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } + 50% { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } + to { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } +} +`, + }, + { + name: 'comments that contain the phrase `prettier-ignore` but do not prevent formatting', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/** + * prettier-ignore + */ +h1, h2, h3, h4, h5, h6 { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, +]; diff --git a/tests/css/prettier-ignore/relative.test.ts b/tests/css/prettier-ignore/relative.test.ts new file mode 100644 index 0000000..cd39bdf --- /dev/null +++ b/tests/css/prettier-ignore/relative.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'css', + printWidth: 60, + endingPosition: 'relative', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/css/pseudo-class/__snapshots__/absolute.test.ts.snap b/tests/css/pseudo-class/__snapshots__/absolute.test.ts.snap new file mode 100644 index 0000000..7fc20a4 --- /dev/null +++ b/tests/css/pseudo-class/__snapshots__/absolute.test.ts.snap @@ -0,0 +1,178 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`':active' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* Unvisited links */ +a:link { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +/* Visited links */ +a:visited { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +/* Hovered links */ +a:hover { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +/* Active links */ +a:active { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Active paragraphs */ +p:active { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`':checked' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +div, +select { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Labels for checked inputs */ +input:checked + label { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Radio element, when checked */ +input[type="radio"]:checked { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Checkbox element, when checked */ +input[type="checkbox"]:checked { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Option elements, when selected */ +option:checked { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`':disabled' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +input[type="text"]:disabled { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`':first-of-type' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p:first-of-type { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`':focus' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.red-input:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +.blue-input:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`':has()' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +section:has(.featured) { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`':hover' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +a:hover { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`':last-of-type' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p:last-of-type { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`':not()' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.fancy { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/*

elements that don't have a class \`.fancy\` */ +p:not(.fancy) { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Elements that are not

elements */ +body :not(p) { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Elements that are not

s or \`.fancy\` */ +body :not(div):not(.fancy) { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Elements that are not
s or \`.fancy\` */ +body :not(div, .fancy) { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Elements inside an

that aren't a with a class of \`.foo\` */ +h2 :not(span.foo) { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`':root' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +:root { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/css/pseudo-class/__snapshots__/relative.test.ts.snap b/tests/css/pseudo-class/__snapshots__/relative.test.ts.snap new file mode 100644 index 0000000..c3121f6 --- /dev/null +++ b/tests/css/pseudo-class/__snapshots__/relative.test.ts.snap @@ -0,0 +1,178 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`':active' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* Unvisited links */ +a:link { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +/* Visited links */ +a:visited { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +/* Hovered links */ +a:hover { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +/* Active links */ +a:active { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Active paragraphs */ +p:active { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`':checked' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +div, +select { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Labels for checked inputs */ +input:checked + label { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Radio element, when checked */ +input[type="radio"]:checked { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Checkbox element, when checked */ +input[type="checkbox"]:checked { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Option elements, when selected */ +option:checked { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`':disabled' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +input[type="text"]:disabled { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`':first-of-type' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p:first-of-type { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`':focus' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.red-input:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +.blue-input:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`':has()' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +section:has(.featured) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`':hover' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +a:hover { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`':last-of-type' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p:last-of-type { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`':not()' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.fancy { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/*

elements that don't have a class \`.fancy\` */ +p:not(.fancy) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Elements that are not

elements */ +body :not(p) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Elements that are not

s or \`.fancy\` */ +body :not(div):not(.fancy) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Elements that are not
s or \`.fancy\` */ +body :not(div, .fancy) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Elements inside an

that aren't a with a class of \`.foo\` */ +h2 :not(span.foo) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`':root' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +:root { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/css/pseudo-class/absolute.test.ts b/tests/css/pseudo-class/absolute.test.ts new file mode 100644 index 0000000..0ff8229 --- /dev/null +++ b/tests/css/pseudo-class/absolute.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'css', + printWidth: 60, + endingPosition: 'absolute', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/css/pseudo-class/fixtures.ts b/tests/css/pseudo-class/fixtures.ts new file mode 100644 index 0000000..47b1f7c --- /dev/null +++ b/tests/css/pseudo-class/fixtures.ts @@ -0,0 +1,166 @@ +import type { Fixture } from '../../settings'; + +export const fixtures: Omit[] = [ + { + name: ':active', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* Unvisited links */ +a:link { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +/* Visited links */ +a:visited { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +/* Hovered links */ +a:hover { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +/* Active links */ +a:active { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Active paragraphs */ +p:active { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: ':checked', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +div, +select { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Labels for checked inputs */ +input:checked + label { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Radio element, when checked */ +input[type="radio"]:checked { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Checkbox element, when checked */ +input[type="checkbox"]:checked { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Option elements, when selected */ +option:checked { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: ':disabled', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +input[type="text"]:disabled { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: ':first-of-type', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p:first-of-type { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: ':focus', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.red-input:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +.blue-input:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: ':has()', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +section:has(.featured) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: ':hover', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +a:hover { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: ':last-of-type', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p:last-of-type { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: ':not()', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.fancy { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/*

elements that don't have a class \`.fancy\` */ +p:not(.fancy) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Elements that are not

elements */ +body :not(p) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Elements that are not

s or \`.fancy\` */ +body :not(div):not(.fancy) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Elements that are not
s or \`.fancy\` */ +body :not(div, .fancy) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Elements inside an

that aren't a with a class of \`.foo\` */ +h2 :not(span.foo) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: ':root', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +:root { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, +]; diff --git a/tests/css/pseudo-class/relative.test.ts b/tests/css/pseudo-class/relative.test.ts new file mode 100644 index 0000000..cd39bdf --- /dev/null +++ b/tests/css/pseudo-class/relative.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'css', + printWidth: 60, + endingPosition: 'relative', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/css/pseudo-element/__snapshots__/absolute.test.ts.snap b/tests/css/pseudo-element/__snapshots__/absolute.test.ts.snap new file mode 100644 index 0000000..aa110a9 --- /dev/null +++ b/tests/css/pseudo-element/__snapshots__/absolute.test.ts.snap @@ -0,0 +1,77 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'::after' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.exciting-text::after { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +.boring-text::after { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'::before' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +q::before { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +q::after { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'::first-letter' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +h2 + p::first-letter { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'::marker' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +ul li::marker { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'::placeholder' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +input::placeholder { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'::selection' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* Make selected text gold on a red background */ +::selection { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Make selected text in a paragraph white on a blue background */ +p::selection { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/css/pseudo-element/__snapshots__/relative.test.ts.snap b/tests/css/pseudo-element/__snapshots__/relative.test.ts.snap new file mode 100644 index 0000000..20967e7 --- /dev/null +++ b/tests/css/pseudo-element/__snapshots__/relative.test.ts.snap @@ -0,0 +1,77 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'::after' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.exciting-text::after { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +.boring-text::after { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'::before' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +q::before { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +q::after { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'::first-letter' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +h2 + p::first-letter { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'::marker' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +ul li::marker { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'::placeholder' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +input::placeholder { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'::selection' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* Make selected text gold on a red background */ +::selection { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Make selected text in a paragraph white on a blue background */ +p::selection { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/css/pseudo-element/absolute.test.ts b/tests/css/pseudo-element/absolute.test.ts new file mode 100644 index 0000000..0ff8229 --- /dev/null +++ b/tests/css/pseudo-element/absolute.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'css', + printWidth: 60, + endingPosition: 'absolute', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/css/pseudo-element/fixtures.ts b/tests/css/pseudo-element/fixtures.ts new file mode 100644 index 0000000..4ae1782 --- /dev/null +++ b/tests/css/pseudo-element/fixtures.ts @@ -0,0 +1,76 @@ +import type { Fixture } from '../../settings'; + +export const fixtures: Omit[] = [ + { + name: '::after', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.exciting-text::after { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +.boring-text::after { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '::before', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +q::before { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +q::after { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '::first-letter', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +h2 + p::first-letter { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '::marker', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +ul li::marker { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '::placeholder', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +input::placeholder { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '::selection', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* Make selected text gold on a red background */ +::selection { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Make selected text in a paragraph white on a blue background */ +p::selection { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, +]; diff --git a/tests/css/pseudo-element/relative.test.ts b/tests/css/pseudo-element/relative.test.ts new file mode 100644 index 0000000..cd39bdf --- /dev/null +++ b/tests/css/pseudo-element/relative.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'css', + printWidth: 60, + endingPosition: 'relative', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/css/selector/__snapshots__/absolute.test.ts.snap b/tests/css/selector/__snapshots__/absolute.test.ts.snap new file mode 100644 index 0000000..3a52635 --- /dev/null +++ b/tests/css/selector/__snapshots__/absolute.test.ts.snap @@ -0,0 +1,206 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'& nesting selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur + adipiscing elit proin ex massa hendrerit eu posuere; + } + } +} +" +`; + +exports[`'attribute selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Internal links, beginning with "#" */ +a[href^="#"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Links with "example" anywhere in the URL */ +a[href*="example"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Links with "insensitive" anywhere in the URL, + regardless of capitalization */ +a[href*="insensitive" i] { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Links with "cAsE" anywhere in the URL, +with matching capitalization */ +a[href*="cAsE" s] { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Links that end in ".org" */ +a[href$=".org"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Links that start with "https://" and end in ".org" */ +a[href^="https://"][href$=".org"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'class selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.red { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +.yellow-bg { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +.fancy { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'id selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +#blue { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'keyframe selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@keyframes slide-and-fade { + from { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } + 50% { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } + to { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'namespace separator' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@namespace svgNamespace url("http://www.w3.org/2000/svg"); +@namespace htmlNameSpace url("http://www.w3.org/1999/xhtml"); +/* All \`\`s in the default namespace, in this case, all \`\`s */ +a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +/* no namespace */ +|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +/* all namespaces (including no namespace) */ +*|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +/* only the svgNamespace namespace, which is content */ +svgNamespace|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +/* The htmlNameSpace namespace, which is the HTML document */ +htmlNameSpace|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'selector list' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +h1, +h2, +h3, +h4, +h5, +h6 { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +#main, +.content, +article, +h1 + p { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'type selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +span { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'universal selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +* [lang^="en"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +*.warning { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +*#maincontent { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +.floating { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* automatically clear the next sibling after a floating element */ +.floating + * { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/css/selector/__snapshots__/relative.test.ts.snap b/tests/css/selector/__snapshots__/relative.test.ts.snap new file mode 100644 index 0000000..51a7817 --- /dev/null +++ b/tests/css/selector/__snapshots__/relative.test.ts.snap @@ -0,0 +1,206 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'& nesting selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + } +} +" +`; + +exports[`'attribute selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Internal links, beginning with "#" */ +a[href^="#"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Links with "example" anywhere in the URL */ +a[href*="example"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Links with "insensitive" anywhere in the URL, + regardless of capitalization */ +a[href*="insensitive" i] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Links with "cAsE" anywhere in the URL, +with matching capitalization */ +a[href*="cAsE" s] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Links that end in ".org" */ +a[href$=".org"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Links that start with "https://" and end in ".org" */ +a[href^="https://"][href$=".org"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'class selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.red { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +.yellow-bg { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +.fancy { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'id selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +#blue { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'keyframe selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@keyframes slide-and-fade { + from { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + 50% { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + to { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'namespace separator' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@namespace svgNamespace url("http://www.w3.org/2000/svg"); +@namespace htmlNameSpace url("http://www.w3.org/1999/xhtml"); +/* All \`\`s in the default namespace, in this case, all \`\`s */ +a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +/* no namespace */ +|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +/* all namespaces (including no namespace) */ +*|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +/* only the svgNamespace namespace, which is content */ +svgNamespace|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +/* The htmlNameSpace namespace, which is the HTML document */ +htmlNameSpace|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'selector list' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +h1, +h2, +h3, +h4, +h5, +h6 { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +#main, +.content, +article, +h1 + p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'type selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +span { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'universal selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +* [lang^="en"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +*.warning { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +*#maincontent { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +.floating { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* automatically clear the next sibling after a floating element */ +.floating + * { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/css/selector/absolute.test.ts b/tests/css/selector/absolute.test.ts new file mode 100644 index 0000000..0ff8229 --- /dev/null +++ b/tests/css/selector/absolute.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'css', + printWidth: 60, + endingPosition: 'absolute', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/css/selector/fixtures.ts b/tests/css/selector/fixtures.ts new file mode 100644 index 0000000..4d47374 --- /dev/null +++ b/tests/css/selector/fixtures.ts @@ -0,0 +1,183 @@ +import type { Fixture } from '../../settings'; + +export const fixtures: Omit[] = [ + { + name: '& nesting selector', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + } +} +`, + }, + { + name: 'attribute selector', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Internal links, beginning with "#" */ +a[href^="#"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Links with "example" anywhere in the URL */ +a[href*="example"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Links with "insensitive" anywhere in the URL, + regardless of capitalization */ +a[href*="insensitive" i] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Links with "cAsE" anywhere in the URL, +with matching capitalization */ +a[href*="cAsE" s] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Links that end in ".org" */ +a[href$=".org"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Links that start with "https://" and end in ".org" */ +a[href^="https://"][href$=".org"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: 'class selector', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.red { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +.yellow-bg { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +.fancy { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: 'id selector', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +#blue { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: 'keyframe selector', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@keyframes slide-and-fade { + from { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + 50% { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + to { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, + { + name: 'namespace separator', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@namespace svgNamespace url("http://www.w3.org/2000/svg"); +@namespace htmlNameSpace url("http://www.w3.org/1999/xhtml"); +/* All \`\`s in the default namespace, in this case, all \`\`s */ +a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +/* no namespace */ +|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +/* all namespaces (including no namespace) */ +*|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +/* only the svgNamespace namespace, which is content */ +svgNamespace|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +/* The htmlNameSpace namespace, which is the HTML document */ +htmlNameSpace|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: 'selector list', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +h1, h2, h3, h4, h5, h6 { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +#main, +.content, +article, +h1 + p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: 'type selector', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +span { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: 'universal selector', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +* [lang^="en"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +*.warning { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +*#maincontent { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +.floating { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* automatically clear the next sibling after a floating element */ +.floating + * { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, +]; diff --git a/tests/css/selector/relative.test.ts b/tests/css/selector/relative.test.ts new file mode 100644 index 0000000..cd39bdf --- /dev/null +++ b/tests/css/selector/relative.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'css', + printWidth: 60, + endingPosition: 'relative', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/less/at-rule/__snapshots__/absolute.test.ts.snap b/tests/less/at-rule/__snapshots__/absolute.test.ts.snap new file mode 100644 index 0000000..50e3d3e --- /dev/null +++ b/tests/less/at-rule/__snapshots__/absolute.test.ts.snap @@ -0,0 +1,283 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'@color-profile' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@color-profile --swop5c { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +.header { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@container' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* A container context based on inline size */ +.post { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Apply styles if the container is narrower than 650px */ +@container (width < 650px) { + .card { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@counter-style' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@counter-style circled-alpha { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +.items { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@font-face' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@font-face { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +body { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@font-feature-values' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* At-rule for "nice-style" in Font One */ +@font-feature-values Font One { + @styleset { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} + +/* At-rule for "nice-style" in Font Two */ +@font-feature-values Font Two { + @styleset { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} + +/* Apply the at-rules with a single declaration */ +.nice-look { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@font-palette-values' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@import "https://fonts.googleapis.com/css2?family=Bungee+Spice"; +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +@font-palette-values --Alternate { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +.alternate { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@keyframes' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +@keyframes slide-in { + from { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } + + to { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@layer' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +@layer type { + .box p { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@media' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@media print { + body { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} + +@media screen { + body { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} + +@media screen, print { + body { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@page' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@page { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +section { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +@media print { + button { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@position-try' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@position-try --custom-left { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +@position-try --custom-bottom { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +@position-try --custom-right { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +@position-try --custom-bottom-right { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@property' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@property --myColor { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +@property --myWidth { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@scope' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@scope (.light-scheme) { + :scope { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } + + a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} + +@scope (.dark-scheme) { + :scope { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } + + a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@starting-style' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +#target { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +@starting-style { + #target { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@view-transition' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@view-transition { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/less/at-rule/__snapshots__/relative.test.ts.snap b/tests/less/at-rule/__snapshots__/relative.test.ts.snap new file mode 100644 index 0000000..95ad088 --- /dev/null +++ b/tests/less/at-rule/__snapshots__/relative.test.ts.snap @@ -0,0 +1,283 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'@color-profile' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@color-profile --swop5c { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +.header { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@container' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* A container context based on inline size */ +.post { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Apply styles if the container is narrower than 650px */ +@container (width < 650px) { + .card { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@counter-style' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@counter-style circled-alpha { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +.items { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@font-face' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@font-face { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +body { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@font-feature-values' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* At-rule for "nice-style" in Font One */ +@font-feature-values Font One { + @styleset { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} + +/* At-rule for "nice-style" in Font Two */ +@font-feature-values Font Two { + @styleset { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} + +/* Apply the at-rules with a single declaration */ +.nice-look { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@font-palette-values' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@import "https://fonts.googleapis.com/css2?family=Bungee+Spice"; +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +@font-palette-values --Alternate { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +.alternate { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@keyframes' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +@keyframes slide-in { + from { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + + to { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@layer' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +@layer type { + .box p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@media' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@media print { + body { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} + +@media screen { + body { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} + +@media screen, print { + body { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@page' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@page { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +section { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +@media print { + button { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@position-try' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@position-try --custom-left { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +@position-try --custom-bottom { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +@position-try --custom-right { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +@position-try --custom-bottom-right { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@property' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@property --myColor { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +@property --myWidth { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@scope' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@scope (.light-scheme) { + :scope { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + + a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} + +@scope (.dark-scheme) { + :scope { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + + a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@starting-style' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +#target { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +@starting-style { + #target { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@view-transition' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@view-transition { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/less/at-rule/absolute.test.ts b/tests/less/at-rule/absolute.test.ts new file mode 100644 index 0000000..3d711e1 --- /dev/null +++ b/tests/less/at-rule/absolute.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'less', + printWidth: 60, + endingPosition: 'absolute', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/less/at-rule/fixtures.ts b/tests/less/at-rule/fixtures.ts new file mode 100644 index 0000000..2b1db16 --- /dev/null +++ b/tests/less/at-rule/fixtures.ts @@ -0,0 +1,262 @@ +import type { Fixture } from '../../settings'; + +export const fixtures: Omit[] = [ + { + name: '@color-profile', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@color-profile --swop5c { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +.header { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '@container', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* A container context based on inline size */ +.post { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Apply styles if the container is narrower than 650px */ +@container (width < 650px) { + .card { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, + { + name: '@counter-style', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@counter-style circled-alpha { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +.items { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '@font-face', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@font-face { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +body { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '@font-feature-values', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* At-rule for "nice-style" in Font One */ +@font-feature-values Font One { + @styleset { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} + +/* At-rule for "nice-style" in Font Two */ +@font-feature-values Font Two { + @styleset { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} + +/* Apply the at-rules with a single declaration */ +.nice-look { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '@font-palette-values', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@import "https://fonts.googleapis.com/css2?family=Bungee+Spice"; +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +@font-palette-values --Alternate { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +.alternate { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '@keyframes', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +@keyframes slide-in { + from { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + + to { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, + { + name: '@layer', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +@layer type { + .box p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, + { + name: '@media', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@media print { + body { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} + +@media screen { + body { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} + +@media screen, print { + body { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, + { + name: '@page', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@page { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +section { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +@media print { + button { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, + { + name: '@position-try', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@position-try --custom-left { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +@position-try --custom-bottom { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +@position-try --custom-right { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +@position-try --custom-bottom-right { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '@property', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@property --myColor { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +@property --myWidth { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '@scope', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@scope (.light-scheme) { + :scope { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + + a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} + +@scope (.dark-scheme) { + :scope { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + + a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, + { + name: '@starting-style', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +#target { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +@starting-style { + #target { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, + { + name: '@view-transition', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@view-transition { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, +]; diff --git a/tests/less/at-rule/relative.test.ts b/tests/less/at-rule/relative.test.ts new file mode 100644 index 0000000..f713d75 --- /dev/null +++ b/tests/less/at-rule/relative.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'less', + printWidth: 60, + endingPosition: 'relative', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/less/combinator/__snapshots__/absolute.test.ts.snap b/tests/less/combinator/__snapshots__/absolute.test.ts.snap new file mode 100644 index 0000000..3844a9d --- /dev/null +++ b/tests/less/combinator/__snapshots__/absolute.test.ts.snap @@ -0,0 +1,47 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'child combinator' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +span { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +div > span { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'descendant combinator' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +li { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +li li { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'next-sibling combinator' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +li:first-of-type + li { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'subsequent-sibling combinator' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p ~ span { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/less/combinator/__snapshots__/relative.test.ts.snap b/tests/less/combinator/__snapshots__/relative.test.ts.snap new file mode 100644 index 0000000..feea6dc --- /dev/null +++ b/tests/less/combinator/__snapshots__/relative.test.ts.snap @@ -0,0 +1,47 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'child combinator' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +span { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +div > span { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'descendant combinator' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +li { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +li li { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'next-sibling combinator' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +li:first-of-type + li { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'subsequent-sibling combinator' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p ~ span { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/less/combinator/absolute.test.ts b/tests/less/combinator/absolute.test.ts new file mode 100644 index 0000000..3d711e1 --- /dev/null +++ b/tests/less/combinator/absolute.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'less', + printWidth: 60, + endingPosition: 'absolute', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/less/combinator/fixtures.ts b/tests/less/combinator/fixtures.ts new file mode 100644 index 0000000..731a5a0 --- /dev/null +++ b/tests/less/combinator/fixtures.ts @@ -0,0 +1,48 @@ +import type { Fixture } from '../../settings'; + +export const fixtures: Omit[] = [ + { + name: 'child combinator', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +span { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +div > span { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: 'descendant combinator', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +li { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +li li { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: 'next-sibling combinator', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +li:first-of-type + li { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: 'subsequent-sibling combinator', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p ~ span { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, +]; diff --git a/tests/less/combinator/relative.test.ts b/tests/less/combinator/relative.test.ts new file mode 100644 index 0000000..f713d75 --- /dev/null +++ b/tests/less/combinator/relative.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'less', + printWidth: 60, + endingPosition: 'relative', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/less/css-guard/__snapshots__/absolute.test.ts.snap b/tests/less/css-guard/__snapshots__/absolute.test.ts.snap new file mode 100644 index 0000000..2026ddd --- /dev/null +++ b/tests/less/css-guard/__snapshots__/absolute.test.ts.snap @@ -0,0 +1,21 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'example' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +button when (@my-option = true) { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +& when (@my-option = true) { + button { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } + a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; diff --git a/tests/less/css-guard/__snapshots__/relative.test.ts.snap b/tests/less/css-guard/__snapshots__/relative.test.ts.snap new file mode 100644 index 0000000..9db035d --- /dev/null +++ b/tests/less/css-guard/__snapshots__/relative.test.ts.snap @@ -0,0 +1,21 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'example' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +button when (@my-option = true) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +& when (@my-option = true) { + button { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; diff --git a/tests/less/css-guard/absolute.test.ts b/tests/less/css-guard/absolute.test.ts new file mode 100644 index 0000000..3d711e1 --- /dev/null +++ b/tests/less/css-guard/absolute.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'less', + printWidth: 60, + endingPosition: 'absolute', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/less/css-guard/fixtures.ts b/tests/less/css-guard/fixtures.ts new file mode 100644 index 0000000..50483b2 --- /dev/null +++ b/tests/less/css-guard/fixtures.ts @@ -0,0 +1,22 @@ +import type { Fixture } from '../../settings'; + +export const fixtures: Omit[] = [ + { + name: 'example', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +button when (@my-option = true) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +& when (@my-option = true) { + button { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, +]; diff --git a/tests/less/css-guard/relative.test.ts b/tests/less/css-guard/relative.test.ts new file mode 100644 index 0000000..f713d75 --- /dev/null +++ b/tests/less/css-guard/relative.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'less', + printWidth: 60, + endingPosition: 'relative', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/less/detached-ruleset/__snapshots__/absolute.test.ts.snap b/tests/less/detached-ruleset/__snapshots__/absolute.test.ts.snap new file mode 100644 index 0000000..303390c --- /dev/null +++ b/tests/less/detached-ruleset/__snapshots__/absolute.test.ts.snap @@ -0,0 +1,55 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'example' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +// declare detached ruleset +@detached-ruleset: { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +}; // semi-colon is optional in 3.5.0+ + +// use detached ruleset +.top { + @detached-ruleset(); +} +" +`; + +exports[`'property / variable accessors' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@config: { + option1: true; + option2: false; +}; + +.mixin() when (@config[option1] = true) { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +.box { + .mixin(); +} +" +`; + +exports[`'scoping' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@detached-ruleset: { + caller-variable: @caller-variable; // variable is undefined here + .caller-mixin(); // mixin is undefined here +}; + +selector { + // use detached ruleset + @detached-ruleset(); + + // define variable and mixin needed inside the detached ruleset + @caller-variable: value; + .caller-mixin() { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; diff --git a/tests/less/detached-ruleset/__snapshots__/relative.test.ts.snap b/tests/less/detached-ruleset/__snapshots__/relative.test.ts.snap new file mode 100644 index 0000000..7574ac8 --- /dev/null +++ b/tests/less/detached-ruleset/__snapshots__/relative.test.ts.snap @@ -0,0 +1,55 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'example' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +// declare detached ruleset +@detached-ruleset: { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +}; // semi-colon is optional in 3.5.0+ + +// use detached ruleset +.top { + @detached-ruleset(); +} +" +`; + +exports[`'property / variable accessors' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@config: { + option1: true; + option2: false; +}; + +.mixin() when (@config[option1] = true) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +.box { + .mixin(); +} +" +`; + +exports[`'scoping' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@detached-ruleset: { + caller-variable: @caller-variable; // variable is undefined here + .caller-mixin(); // mixin is undefined here +}; + +selector { + // use detached ruleset + @detached-ruleset(); + + // define variable and mixin needed inside the detached ruleset + @caller-variable: value; + .caller-mixin() { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; diff --git a/tests/less/detached-ruleset/absolute.test.ts b/tests/less/detached-ruleset/absolute.test.ts new file mode 100644 index 0000000..3d711e1 --- /dev/null +++ b/tests/less/detached-ruleset/absolute.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'less', + printWidth: 60, + endingPosition: 'absolute', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/less/detached-ruleset/fixtures.ts b/tests/less/detached-ruleset/fixtures.ts new file mode 100644 index 0000000..298a5b2 --- /dev/null +++ b/tests/less/detached-ruleset/fixtures.ts @@ -0,0 +1,56 @@ +import type { Fixture } from '../../settings'; + +export const fixtures: Omit[] = [ + { + name: 'example', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +// declare detached ruleset +@detached-ruleset: { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; }; // semi-colon is optional in 3.5.0+ + +// use detached ruleset +.top { + @detached-ruleset(); +} +`, + }, + { + name: 'scoping', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@detached-ruleset: { + caller-variable: @caller-variable; // variable is undefined here + .caller-mixin(); // mixin is undefined here +}; + +selector { + // use detached ruleset + @detached-ruleset(); + + // define variable and mixin needed inside the detached ruleset + @caller-variable: value; + .caller-mixin() { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, + { + name: 'property / variable accessors', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@config: { + option1: true; + option2: false; +} + +.mixin() when (@config[option1] = true) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +.box { + .mixin(); +} +`, + }, +]; diff --git a/tests/less/detached-ruleset/relative.test.ts b/tests/less/detached-ruleset/relative.test.ts new file mode 100644 index 0000000..f713d75 --- /dev/null +++ b/tests/less/detached-ruleset/relative.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'less', + printWidth: 60, + endingPosition: 'relative', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/less/extend/__snapshots__/absolute.test.ts.snap b/tests/less/extend/__snapshots__/absolute.test.ts.snap new file mode 100644 index 0000000..4ea065f --- /dev/null +++ b/tests/less/extend/__snapshots__/absolute.test.ts.snap @@ -0,0 +1,154 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'duplication detection' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.alert-info, +.widget { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +.alert:extend(.alert-info, .widget) { +} +" +`; + +exports[`'exact matching with extend' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.a.class, +.class.a, +.class > .a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +.test:extend(.class) { +} // this will NOT match the any selectors above +" +`; + +exports[`'example' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +nav ul { + &:extend(.inline); + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +.inline { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'extend "all"' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.a.b.test, +.test.c { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +.test { + &:hover { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} + +.replacement:extend(.test all) { +} +" +`; + +exports[`'extend attached to selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.big-division, +.big-bag:extend(.bag), +.big-bucket:extend(.bucket) { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'extending nested selectors' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.bucket { + tr { + // nested ruleset with target selector + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +.some-class:extend(.bucket tr) { +} // nested ruleset is recognized +" +`; + +exports[`'nth expression' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +:nth-child(1n + 3) { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +.child:extend(:nth-child(n + 3)) { +} + +[title="identifier"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +[title="identifier"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +[title="identifier"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +.noQuote:extend([title="identifier"]) { +} +.singleQuote:extend([title="identifier"]) { +} +.doubleQuote:extend([title="identifier"]) { +} +" +`; + +exports[`'scoping / extend inside @media' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@media print { + .screenClass:extend(.selector) { + } // extend inside media + .selector { + // this will be matched - it is in the same media + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +.selector { + // ruleset on top of style sheet - extend ignores it + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +@media screen { + .selector { + // ruleset inside another media - extend ignores it + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'selector interpolation with extend' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.bucket { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +@{variable}:extend(.bucket) { +} +@variable: .selector; +" +`; diff --git a/tests/less/extend/__snapshots__/relative.test.ts.snap b/tests/less/extend/__snapshots__/relative.test.ts.snap new file mode 100644 index 0000000..eafae48 --- /dev/null +++ b/tests/less/extend/__snapshots__/relative.test.ts.snap @@ -0,0 +1,154 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'duplication detection' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.alert-info, +.widget { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +.alert:extend(.alert-info, .widget) { +} +" +`; + +exports[`'exact matching with extend' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.a.class, +.class.a, +.class > .a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +.test:extend(.class) { +} // this will NOT match the any selectors above +" +`; + +exports[`'example' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +nav ul { + &:extend(.inline); + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +.inline { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'extend "all"' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.a.b.test, +.test.c { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +.test { + &:hover { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} + +.replacement:extend(.test all) { +} +" +`; + +exports[`'extend attached to selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.big-division, +.big-bag:extend(.bag), +.big-bucket:extend(.bucket) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'extending nested selectors' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.bucket { + tr { + // nested ruleset with target selector + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +.some-class:extend(.bucket tr) { +} // nested ruleset is recognized +" +`; + +exports[`'nth expression' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +:nth-child(1n + 3) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +.child:extend(:nth-child(n + 3)) { +} + +[title="identifier"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +[title="identifier"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +[title="identifier"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +.noQuote:extend([title="identifier"]) { +} +.singleQuote:extend([title="identifier"]) { +} +.doubleQuote:extend([title="identifier"]) { +} +" +`; + +exports[`'scoping / extend inside @media' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@media print { + .screenClass:extend(.selector) { + } // extend inside media + .selector { + // this will be matched - it is in the same media + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +.selector { + // ruleset on top of style sheet - extend ignores it + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +@media screen { + .selector { + // ruleset inside another media - extend ignores it + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'selector interpolation with extend' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.bucket { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +@{variable}:extend(.bucket) { +} +@variable: .selector; +" +`; diff --git a/tests/less/extend/absolute.test.ts b/tests/less/extend/absolute.test.ts new file mode 100644 index 0000000..3d711e1 --- /dev/null +++ b/tests/less/extend/absolute.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'less', + printWidth: 60, + endingPosition: 'absolute', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/less/extend/fixtures.ts b/tests/less/extend/fixtures.ts new file mode 100644 index 0000000..f312205 --- /dev/null +++ b/tests/less/extend/fixtures.ts @@ -0,0 +1,136 @@ +import type { Fixture } from '../../settings'; + +export const fixtures: Omit[] = [ + { + name: 'example', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +nav ul { + &:extend(.inline); + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +.inline { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: 'extend attached to selector', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.big-division, +.big-bag:extend(.bag), +.big-bucket:extend(.bucket) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: 'extending nested selectors', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.bucket { + tr { // nested ruleset with target selector + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +.some-class:extend(.bucket tr) {} // nested ruleset is recognized +`, + }, + { + name: 'exact matching with extend', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.a.class, +.class.a, +.class > .a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +.test:extend(.class) {} // this will NOT match the any selectors above +`, + }, + { + name: 'nth expression', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +:nth-child(1n+3) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +.child:extend(:nth-child(n+3)) {} + +[title=identifier] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +[title='identifier'] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +[title="identifier"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +.noQuote:extend([title=identifier]) {} +.singleQuote:extend([title='identifier']) {} +.doubleQuote:extend([title="identifier"]) {} +`, + }, + { + name: 'extend "all"', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.a.b.test, +.test.c { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +.test { + &:hover { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} + +.replacement:extend(.test all) {} +`, + }, + { + name: 'selector interpolation with extend', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.bucket { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +@{variable}:extend(.bucket) {} +@variable: .selector; +`, + }, + { + name: 'scoping / extend inside @media', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@media print { + .screenClass:extend(.selector) {} // extend inside media + .selector { // this will be matched - it is in the same media + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +.selector { // ruleset on top of style sheet - extend ignores it + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +@media screen { + .selector { // ruleset inside another media - extend ignores it + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, + { + name: 'duplication detection', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.alert-info, +.widget { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +.alert:extend(.alert-info, .widget) {} +`, + }, +]; diff --git a/tests/less/extend/relative.test.ts b/tests/less/extend/relative.test.ts new file mode 100644 index 0000000..f713d75 --- /dev/null +++ b/tests/less/extend/relative.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'less', + printWidth: 60, + endingPosition: 'relative', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/less/map/__snapshots__/absolute.test.ts.snap b/tests/less/map/__snapshots__/absolute.test.ts.snap new file mode 100644 index 0000000..8b96be3 --- /dev/null +++ b/tests/less/map/__snapshots__/absolute.test.ts.snap @@ -0,0 +1,21 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'example' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@sizes: { + mobile: 320px; + tablet: 768px; + desktop: 1024px; +}; + +.navbar { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + + @media (min-width: @sizes[tablet]) { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; diff --git a/tests/less/map/__snapshots__/relative.test.ts.snap b/tests/less/map/__snapshots__/relative.test.ts.snap new file mode 100644 index 0000000..ab94215 --- /dev/null +++ b/tests/less/map/__snapshots__/relative.test.ts.snap @@ -0,0 +1,21 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'example' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@sizes: { + mobile: 320px; + tablet: 768px; + desktop: 1024px; +}; + +.navbar { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + + @media (min-width: @sizes[tablet]) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; diff --git a/tests/less/map/absolute.test.ts b/tests/less/map/absolute.test.ts new file mode 100644 index 0000000..3d711e1 --- /dev/null +++ b/tests/less/map/absolute.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'less', + printWidth: 60, + endingPosition: 'absolute', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/less/map/fixtures.ts b/tests/less/map/fixtures.ts new file mode 100644 index 0000000..24c4989 --- /dev/null +++ b/tests/less/map/fixtures.ts @@ -0,0 +1,23 @@ +import type { Fixture } from '../../settings'; + +export const fixtures: Omit[] = [ + { + name: 'example', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@sizes: { + mobile: 320px; + tablet: 768px; + desktop: 1024px; +} + +.navbar { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + + @media (min-width: @sizes[tablet]) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, +]; diff --git a/tests/less/map/relative.test.ts b/tests/less/map/relative.test.ts new file mode 100644 index 0000000..f713d75 --- /dev/null +++ b/tests/less/map/relative.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'less', + printWidth: 60, + endingPosition: 'relative', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/less/mixin/__snapshots__/absolute.test.ts.snap b/tests/less/mixin/__snapshots__/absolute.test.ts.snap new file mode 100644 index 0000000..f6cb29c --- /dev/null +++ b/tests/less/mixin/__snapshots__/absolute.test.ts.snap @@ -0,0 +1,121 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'example' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.a, +#b { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +.mixin-class { + .a(); +} +.mixin-id { + #b(); +} +" +`; + +exports[`'guarded namespaces' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +#namespace when (@mode = huge) { + .mixin() { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} + +#namespace { + .mixin() when (@mode = huge) { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} + +#sp_1 when (default()) { + #sp_2 when (default()) { + .mixin() when not(default()) { + @apply lorem ipsum dolor sit amet consectetur + adipiscing elit proin ex massa hendrerit eu posuere; + } + } +} +" +`; + +exports[`'mixin guards' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.mixin(@a) when (lightness(@a) >= 50%) { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +.mixin(@a) when (lightness(@a) < 50%) { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +.mixin(@a) { + color: @a; +} +" +`; + +exports[`'mixins with parentheses' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.my-mixin { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +.my-other-mixin() { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +.class { + .my-mixin(); + .my-other-mixin(); +} +" +`; + +exports[`'namespaces' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +#my-library { + .my-mixin() { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +// which can be used like this +.class { + #my-library.my-mixin(); +} +" +`; + +exports[`'pattern-matching' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.mixin(dark, @color) { + color: darken(@color, 10%); +} +.mixin(light, @color) { + color: lighten(@color, 10%); +} +.mixin(@_, @color) { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'selectors in mixins' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.my-hover-mixin() { + &:hover { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +button { + .my-hover-mixin(); +} +" +`; diff --git a/tests/less/mixin/__snapshots__/relative.test.ts.snap b/tests/less/mixin/__snapshots__/relative.test.ts.snap new file mode 100644 index 0000000..128c0aa --- /dev/null +++ b/tests/less/mixin/__snapshots__/relative.test.ts.snap @@ -0,0 +1,121 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'example' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.a, +#b { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +.mixin-class { + .a(); +} +.mixin-id { + #b(); +} +" +`; + +exports[`'guarded namespaces' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +#namespace when (@mode = huge) { + .mixin() { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} + +#namespace { + .mixin() when (@mode = huge) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} + +#sp_1 when (default()) { + #sp_2 when (default()) { + .mixin() when not(default()) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + } +} +" +`; + +exports[`'mixin guards' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.mixin(@a) when (lightness(@a) >= 50%) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +.mixin(@a) when (lightness(@a) < 50%) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +.mixin(@a) { + color: @a; +} +" +`; + +exports[`'mixins with parentheses' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.my-mixin { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +.my-other-mixin() { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +.class { + .my-mixin(); + .my-other-mixin(); +} +" +`; + +exports[`'namespaces' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +#my-library { + .my-mixin() { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +// which can be used like this +.class { + #my-library.my-mixin(); +} +" +`; + +exports[`'pattern-matching' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.mixin(dark, @color) { + color: darken(@color, 10%); +} +.mixin(light, @color) { + color: lighten(@color, 10%); +} +.mixin(@_, @color) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'selectors in mixins' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.my-hover-mixin() { + &:hover { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +button { + .my-hover-mixin(); +} +" +`; diff --git a/tests/less/mixin/absolute.test.ts b/tests/less/mixin/absolute.test.ts new file mode 100644 index 0000000..3d711e1 --- /dev/null +++ b/tests/less/mixin/absolute.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'less', + printWidth: 60, + endingPosition: 'absolute', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/less/mixin/fixtures.ts b/tests/less/mixin/fixtures.ts new file mode 100644 index 0000000..75cfffe --- /dev/null +++ b/tests/less/mixin/fixtures.ts @@ -0,0 +1,113 @@ +import type { Fixture } from '../../settings'; + +export const fixtures: Omit[] = [ + { + name: 'example', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.a, #b { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +.mixin-class { + .a(); +} +.mixin-id { + #b(); +} +`, + }, + { + name: 'mixins with parentheses', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.my-mixin { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +.my-other-mixin() { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +.class { + .my-mixin(); + .my-other-mixin(); +} +`, + }, + { + name: 'selectors in mixins', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.my-hover-mixin() { + &:hover { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +button { + .my-hover-mixin(); +} +`, + }, + { + name: 'namespaces', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +#my-library { + .my-mixin() { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +// which can be used like this +.class { + #my-library.my-mixin(); +} +`, + }, + { + name: 'guarded namespaces', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +#namespace when (@mode = huge) { + .mixin() { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } +} + +#namespace { + .mixin() when (@mode = huge) { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } +} + +#sp_1 when (default()) { + #sp_2 when (default()) { + .mixin() when not(default()) { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } + } +} +`, + }, + { + name: 'pattern-matching', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.mixin(dark, @color) { + color: darken(@color, 10%); +} +.mixin(light, @color) { + color: lighten(@color, 10%); +} +.mixin(@_, @color) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: 'mixin guards', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.mixin(@a) when (lightness(@a) >= 50%) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +.mixin(@a) when (lightness(@a) < 50%) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +.mixin(@a) { + color: @a; +} +`, + }, +]; diff --git a/tests/less/mixin/relative.test.ts b/tests/less/mixin/relative.test.ts new file mode 100644 index 0000000..f713d75 --- /dev/null +++ b/tests/less/mixin/relative.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'less', + printWidth: 60, + endingPosition: 'relative', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/less/others/__snapshots__/absolute.test.ts.snap b/tests/less/others/__snapshots__/absolute.test.ts.snap new file mode 100644 index 0000000..27f720e --- /dev/null +++ b/tests/less/others/__snapshots__/absolute.test.ts.snap @@ -0,0 +1,57 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'endOfLine: crlf' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur + adipiscing elit proin ex massa hendrerit eu posuere; + } + } +} +" +`; + +exports[`'tabWidth: 4' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur + adipiscing elit proin ex massa hendrerit eu + posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur + adipiscing elit proin ex massa hendrerit eu + posuere; + } + } +} +" +`; + +exports[`'useTabs: true' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur + adipiscing elit proin ex massa hendrerit eu posuere; + } + } +} +" +`; diff --git a/tests/less/others/__snapshots__/relative.test.ts.snap b/tests/less/others/__snapshots__/relative.test.ts.snap new file mode 100644 index 0000000..713fdd1 --- /dev/null +++ b/tests/less/others/__snapshots__/relative.test.ts.snap @@ -0,0 +1,55 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'endOfLine: crlf' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + } +} +" +`; + +exports[`'tabWidth: 4' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + } +} +" +`; + +exports[`'useTabs: true' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + } +} +" +`; diff --git a/tests/less/others/absolute.test.ts b/tests/less/others/absolute.test.ts new file mode 100644 index 0000000..3d711e1 --- /dev/null +++ b/tests/less/others/absolute.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'less', + printWidth: 60, + endingPosition: 'absolute', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/less/others/fixtures.ts b/tests/less/others/fixtures.ts new file mode 100644 index 0000000..824abde --- /dev/null +++ b/tests/less/others/fixtures.ts @@ -0,0 +1,61 @@ +import type { Fixture } from '../../settings'; + +export const fixtures: Omit[] = [ + { + name: 'tabWidth: 4', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + } +} +`, + options: { + tabWidth: 4, + }, + }, + { + name: 'useTabs: true', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + } +} +`, + options: { + useTabs: true, + }, + }, + { + name: 'endOfLine: crlf', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + } +} +`, + options: { + endOfLine: 'crlf', + }, + }, +]; diff --git a/tests/less/others/relative.test.ts b/tests/less/others/relative.test.ts new file mode 100644 index 0000000..f713d75 --- /dev/null +++ b/tests/less/others/relative.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'less', + printWidth: 60, + endingPosition: 'relative', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/less/parent-selector/__snapshots__/absolute.test.ts.snap b/tests/less/parent-selector/__snapshots__/absolute.test.ts.snap new file mode 100644 index 0000000..025b464 --- /dev/null +++ b/tests/less/parent-selector/__snapshots__/absolute.test.ts.snap @@ -0,0 +1,88 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'changing selector order' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.header { + .menu { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + .no-borderradius & { + @apply lorem ipsum dolor sit amet consectetur + adipiscing elit proin ex massa hendrerit eu posuere; + } + } +} +" +`; + +exports[`'combinatorial explosion' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p, +a, +ul, +li { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + & + & { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'example' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + &:hover { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} + +.button { + &-ok { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } + &-cancel { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } + + &-custom { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'multiple &' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.link { + & + & { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } + + & & { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } + + && { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } + + &, + &ish { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; diff --git a/tests/less/parent-selector/__snapshots__/relative.test.ts.snap b/tests/less/parent-selector/__snapshots__/relative.test.ts.snap new file mode 100644 index 0000000..e62fa49 --- /dev/null +++ b/tests/less/parent-selector/__snapshots__/relative.test.ts.snap @@ -0,0 +1,88 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'changing selector order' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.header { + .menu { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + .no-borderradius & { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + } +} +" +`; + +exports[`'combinatorial explosion' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p, +a, +ul, +li { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + & + & { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'example' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + &:hover { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} + +.button { + &-ok { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + &-cancel { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + + &-custom { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'multiple &' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.link { + & + & { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + + & & { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + + && { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + + &, + &ish { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; diff --git a/tests/less/parent-selector/absolute.test.ts b/tests/less/parent-selector/absolute.test.ts new file mode 100644 index 0000000..3d711e1 --- /dev/null +++ b/tests/less/parent-selector/absolute.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'less', + printWidth: 60, + endingPosition: 'absolute', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/less/parent-selector/fixtures.ts b/tests/less/parent-selector/fixtures.ts new file mode 100644 index 0000000..be0e952 --- /dev/null +++ b/tests/less/parent-selector/fixtures.ts @@ -0,0 +1,78 @@ +import type { Fixture } from '../../settings'; + +export const fixtures: Omit[] = [ + { + name: 'example', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + &:hover { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} + +.button { + &-ok { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + &-cancel { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + + &-custom { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, + { + name: 'multiple &', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.link { + & + & { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + + & & { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + + && { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + + &, &ish { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, + { + name: 'changing selector order', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.header { + .menu { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + .no-borderradius & { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + } +} +`, + }, + { + name: 'combinatorial explosion', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p, a, ul, li { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + & + & { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, +]; diff --git a/tests/less/parent-selector/relative.test.ts b/tests/less/parent-selector/relative.test.ts new file mode 100644 index 0000000..f713d75 --- /dev/null +++ b/tests/less/parent-selector/relative.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'less', + printWidth: 60, + endingPosition: 'relative', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/less/prettier-ignore/__snapshots__/absolute.test.ts.snap b/tests/less/prettier-ignore/__snapshots__/absolute.test.ts.snap new file mode 100644 index 0000000..7578fce --- /dev/null +++ b/tests/less/prettier-ignore/__snapshots__/absolute.test.ts.snap @@ -0,0 +1,61 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'comments that contain the phrase \`pre…' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/** + * prettier-ignore + */ +h1, +h2, +h3, +h4, +h5, +h6 { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'ignore comment (1)' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* prettier-ignore */ +#blue { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } +" +`; + +exports[`'ignore comment (2)' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@keyframes slide-and-fade { + /* prettier-ignore */ + from { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } + 50% { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } + to { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'ignore comment (3)' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +nav { + ul { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } + + // prettier-ignore + li { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } + + a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; diff --git a/tests/less/prettier-ignore/__snapshots__/relative.test.ts.snap b/tests/less/prettier-ignore/__snapshots__/relative.test.ts.snap new file mode 100644 index 0000000..a8a70ad --- /dev/null +++ b/tests/less/prettier-ignore/__snapshots__/relative.test.ts.snap @@ -0,0 +1,61 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'comments that contain the phrase \`pre…' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/** + * prettier-ignore + */ +h1, +h2, +h3, +h4, +h5, +h6 { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'ignore comment (1)' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* prettier-ignore */ +#blue { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } +" +`; + +exports[`'ignore comment (2)' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@keyframes slide-and-fade { + /* prettier-ignore */ + from { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } + 50% { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + to { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'ignore comment (3)' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +nav { + ul { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + + // prettier-ignore + li { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } + + a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; diff --git a/tests/less/prettier-ignore/absolute.test.ts b/tests/less/prettier-ignore/absolute.test.ts new file mode 100644 index 0000000..3d711e1 --- /dev/null +++ b/tests/less/prettier-ignore/absolute.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'less', + printWidth: 60, + endingPosition: 'absolute', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/less/prettier-ignore/fixtures.ts b/tests/less/prettier-ignore/fixtures.ts new file mode 100644 index 0000000..a863f53 --- /dev/null +++ b/tests/less/prettier-ignore/fixtures.ts @@ -0,0 +1,54 @@ +import type { Fixture } from '../../settings'; + +export const fixtures: Omit[] = [ + { + name: 'ignore comment (1)', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* prettier-ignore */ +#blue { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } +`, + }, + { + name: 'ignore comment (2)', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@keyframes slide-and-fade { + /* prettier-ignore */ + from { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } + 50% { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } + to { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } +} +`, + }, + { + name: 'ignore comment (3)', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +nav { + ul { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + + // prettier-ignore + li { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } + + a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, + { + name: 'comments that contain the phrase `prettier-ignore` but do not prevent formatting', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/** + * prettier-ignore + */ +h1, h2, h3, h4, h5, h6 { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, +]; diff --git a/tests/less/prettier-ignore/relative.test.ts b/tests/less/prettier-ignore/relative.test.ts new file mode 100644 index 0000000..f713d75 --- /dev/null +++ b/tests/less/prettier-ignore/relative.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'less', + printWidth: 60, + endingPosition: 'relative', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/less/pseudo-class/__snapshots__/absolute.test.ts.snap b/tests/less/pseudo-class/__snapshots__/absolute.test.ts.snap new file mode 100644 index 0000000..7fc20a4 --- /dev/null +++ b/tests/less/pseudo-class/__snapshots__/absolute.test.ts.snap @@ -0,0 +1,178 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`':active' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* Unvisited links */ +a:link { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +/* Visited links */ +a:visited { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +/* Hovered links */ +a:hover { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +/* Active links */ +a:active { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Active paragraphs */ +p:active { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`':checked' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +div, +select { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Labels for checked inputs */ +input:checked + label { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Radio element, when checked */ +input[type="radio"]:checked { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Checkbox element, when checked */ +input[type="checkbox"]:checked { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Option elements, when selected */ +option:checked { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`':disabled' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +input[type="text"]:disabled { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`':first-of-type' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p:first-of-type { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`':focus' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.red-input:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +.blue-input:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`':has()' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +section:has(.featured) { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`':hover' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +a:hover { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`':last-of-type' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p:last-of-type { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`':not()' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.fancy { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/*

elements that don't have a class \`.fancy\` */ +p:not(.fancy) { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Elements that are not

elements */ +body :not(p) { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Elements that are not

s or \`.fancy\` */ +body :not(div):not(.fancy) { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Elements that are not
s or \`.fancy\` */ +body :not(div, .fancy) { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Elements inside an

that aren't a with a class of \`.foo\` */ +h2 :not(span.foo) { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`':root' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +:root { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/less/pseudo-class/__snapshots__/relative.test.ts.snap b/tests/less/pseudo-class/__snapshots__/relative.test.ts.snap new file mode 100644 index 0000000..c3121f6 --- /dev/null +++ b/tests/less/pseudo-class/__snapshots__/relative.test.ts.snap @@ -0,0 +1,178 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`':active' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* Unvisited links */ +a:link { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +/* Visited links */ +a:visited { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +/* Hovered links */ +a:hover { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +/* Active links */ +a:active { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Active paragraphs */ +p:active { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`':checked' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +div, +select { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Labels for checked inputs */ +input:checked + label { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Radio element, when checked */ +input[type="radio"]:checked { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Checkbox element, when checked */ +input[type="checkbox"]:checked { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Option elements, when selected */ +option:checked { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`':disabled' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +input[type="text"]:disabled { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`':first-of-type' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p:first-of-type { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`':focus' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.red-input:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +.blue-input:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`':has()' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +section:has(.featured) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`':hover' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +a:hover { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`':last-of-type' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p:last-of-type { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`':not()' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.fancy { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/*

elements that don't have a class \`.fancy\` */ +p:not(.fancy) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Elements that are not

elements */ +body :not(p) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Elements that are not

s or \`.fancy\` */ +body :not(div):not(.fancy) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Elements that are not
s or \`.fancy\` */ +body :not(div, .fancy) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Elements inside an

that aren't a with a class of \`.foo\` */ +h2 :not(span.foo) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`':root' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +:root { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/less/pseudo-class/absolute.test.ts b/tests/less/pseudo-class/absolute.test.ts new file mode 100644 index 0000000..3d711e1 --- /dev/null +++ b/tests/less/pseudo-class/absolute.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'less', + printWidth: 60, + endingPosition: 'absolute', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/less/pseudo-class/fixtures.ts b/tests/less/pseudo-class/fixtures.ts new file mode 100644 index 0000000..47b1f7c --- /dev/null +++ b/tests/less/pseudo-class/fixtures.ts @@ -0,0 +1,166 @@ +import type { Fixture } from '../../settings'; + +export const fixtures: Omit[] = [ + { + name: ':active', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* Unvisited links */ +a:link { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +/* Visited links */ +a:visited { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +/* Hovered links */ +a:hover { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +/* Active links */ +a:active { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Active paragraphs */ +p:active { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: ':checked', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +div, +select { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Labels for checked inputs */ +input:checked + label { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Radio element, when checked */ +input[type="radio"]:checked { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Checkbox element, when checked */ +input[type="checkbox"]:checked { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Option elements, when selected */ +option:checked { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: ':disabled', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +input[type="text"]:disabled { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: ':first-of-type', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p:first-of-type { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: ':focus', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.red-input:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +.blue-input:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: ':has()', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +section:has(.featured) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: ':hover', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +a:hover { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: ':last-of-type', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p:last-of-type { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: ':not()', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.fancy { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/*

elements that don't have a class \`.fancy\` */ +p:not(.fancy) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Elements that are not

elements */ +body :not(p) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Elements that are not

s or \`.fancy\` */ +body :not(div):not(.fancy) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Elements that are not
s or \`.fancy\` */ +body :not(div, .fancy) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Elements inside an

that aren't a with a class of \`.foo\` */ +h2 :not(span.foo) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: ':root', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +:root { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, +]; diff --git a/tests/less/pseudo-class/relative.test.ts b/tests/less/pseudo-class/relative.test.ts new file mode 100644 index 0000000..f713d75 --- /dev/null +++ b/tests/less/pseudo-class/relative.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'less', + printWidth: 60, + endingPosition: 'relative', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/less/pseudo-element/__snapshots__/absolute.test.ts.snap b/tests/less/pseudo-element/__snapshots__/absolute.test.ts.snap new file mode 100644 index 0000000..aa110a9 --- /dev/null +++ b/tests/less/pseudo-element/__snapshots__/absolute.test.ts.snap @@ -0,0 +1,77 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'::after' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.exciting-text::after { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +.boring-text::after { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'::before' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +q::before { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +q::after { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'::first-letter' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +h2 + p::first-letter { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'::marker' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +ul li::marker { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'::placeholder' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +input::placeholder { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'::selection' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* Make selected text gold on a red background */ +::selection { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Make selected text in a paragraph white on a blue background */ +p::selection { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/less/pseudo-element/__snapshots__/relative.test.ts.snap b/tests/less/pseudo-element/__snapshots__/relative.test.ts.snap new file mode 100644 index 0000000..20967e7 --- /dev/null +++ b/tests/less/pseudo-element/__snapshots__/relative.test.ts.snap @@ -0,0 +1,77 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'::after' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.exciting-text::after { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +.boring-text::after { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'::before' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +q::before { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +q::after { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'::first-letter' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +h2 + p::first-letter { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'::marker' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +ul li::marker { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'::placeholder' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +input::placeholder { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'::selection' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* Make selected text gold on a red background */ +::selection { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Make selected text in a paragraph white on a blue background */ +p::selection { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/less/pseudo-element/absolute.test.ts b/tests/less/pseudo-element/absolute.test.ts new file mode 100644 index 0000000..3d711e1 --- /dev/null +++ b/tests/less/pseudo-element/absolute.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'less', + printWidth: 60, + endingPosition: 'absolute', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/less/pseudo-element/fixtures.ts b/tests/less/pseudo-element/fixtures.ts new file mode 100644 index 0000000..4ae1782 --- /dev/null +++ b/tests/less/pseudo-element/fixtures.ts @@ -0,0 +1,76 @@ +import type { Fixture } from '../../settings'; + +export const fixtures: Omit[] = [ + { + name: '::after', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.exciting-text::after { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +.boring-text::after { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '::before', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +q::before { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +q::after { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '::first-letter', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +h2 + p::first-letter { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '::marker', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +ul li::marker { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '::placeholder', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +input::placeholder { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '::selection', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* Make selected text gold on a red background */ +::selection { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Make selected text in a paragraph white on a blue background */ +p::selection { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, +]; diff --git a/tests/less/pseudo-element/relative.test.ts b/tests/less/pseudo-element/relative.test.ts new file mode 100644 index 0000000..f713d75 --- /dev/null +++ b/tests/less/pseudo-element/relative.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'less', + printWidth: 60, + endingPosition: 'relative', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/less/selector/__snapshots__/absolute.test.ts.snap b/tests/less/selector/__snapshots__/absolute.test.ts.snap new file mode 100644 index 0000000..3a52635 --- /dev/null +++ b/tests/less/selector/__snapshots__/absolute.test.ts.snap @@ -0,0 +1,206 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'& nesting selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur + adipiscing elit proin ex massa hendrerit eu posuere; + } + } +} +" +`; + +exports[`'attribute selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Internal links, beginning with "#" */ +a[href^="#"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Links with "example" anywhere in the URL */ +a[href*="example"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Links with "insensitive" anywhere in the URL, + regardless of capitalization */ +a[href*="insensitive" i] { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Links with "cAsE" anywhere in the URL, +with matching capitalization */ +a[href*="cAsE" s] { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Links that end in ".org" */ +a[href$=".org"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Links that start with "https://" and end in ".org" */ +a[href^="https://"][href$=".org"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'class selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.red { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +.yellow-bg { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +.fancy { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'id selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +#blue { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'keyframe selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@keyframes slide-and-fade { + from { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } + 50% { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } + to { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'namespace separator' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@namespace svgNamespace url("http://www.w3.org/2000/svg"); +@namespace htmlNameSpace url("http://www.w3.org/1999/xhtml"); +/* All \`\`s in the default namespace, in this case, all \`\`s */ +a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +/* no namespace */ +|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +/* all namespaces (including no namespace) */ +*|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +/* only the svgNamespace namespace, which is content */ +svgNamespace|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +/* The htmlNameSpace namespace, which is the HTML document */ +htmlNameSpace|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'selector list' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +h1, +h2, +h3, +h4, +h5, +h6 { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +#main, +.content, +article, +h1 + p { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'type selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +span { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'universal selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +* [lang^="en"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +*.warning { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +*#maincontent { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +.floating { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* automatically clear the next sibling after a floating element */ +.floating + * { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/less/selector/__snapshots__/relative.test.ts.snap b/tests/less/selector/__snapshots__/relative.test.ts.snap new file mode 100644 index 0000000..51a7817 --- /dev/null +++ b/tests/less/selector/__snapshots__/relative.test.ts.snap @@ -0,0 +1,206 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'& nesting selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + } +} +" +`; + +exports[`'attribute selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Internal links, beginning with "#" */ +a[href^="#"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Links with "example" anywhere in the URL */ +a[href*="example"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Links with "insensitive" anywhere in the URL, + regardless of capitalization */ +a[href*="insensitive" i] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Links with "cAsE" anywhere in the URL, +with matching capitalization */ +a[href*="cAsE" s] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Links that end in ".org" */ +a[href$=".org"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Links that start with "https://" and end in ".org" */ +a[href^="https://"][href$=".org"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'class selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.red { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +.yellow-bg { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +.fancy { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'id selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +#blue { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'keyframe selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@keyframes slide-and-fade { + from { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + 50% { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + to { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'namespace separator' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@namespace svgNamespace url("http://www.w3.org/2000/svg"); +@namespace htmlNameSpace url("http://www.w3.org/1999/xhtml"); +/* All \`\`s in the default namespace, in this case, all \`\`s */ +a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +/* no namespace */ +|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +/* all namespaces (including no namespace) */ +*|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +/* only the svgNamespace namespace, which is content */ +svgNamespace|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +/* The htmlNameSpace namespace, which is the HTML document */ +htmlNameSpace|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'selector list' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +h1, +h2, +h3, +h4, +h5, +h6 { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +#main, +.content, +article, +h1 + p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'type selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +span { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'universal selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +* [lang^="en"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +*.warning { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +*#maincontent { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +.floating { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* automatically clear the next sibling after a floating element */ +.floating + * { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/less/selector/absolute.test.ts b/tests/less/selector/absolute.test.ts new file mode 100644 index 0000000..3d711e1 --- /dev/null +++ b/tests/less/selector/absolute.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'less', + printWidth: 60, + endingPosition: 'absolute', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/less/selector/fixtures.ts b/tests/less/selector/fixtures.ts new file mode 100644 index 0000000..4d47374 --- /dev/null +++ b/tests/less/selector/fixtures.ts @@ -0,0 +1,183 @@ +import type { Fixture } from '../../settings'; + +export const fixtures: Omit[] = [ + { + name: '& nesting selector', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + } +} +`, + }, + { + name: 'attribute selector', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Internal links, beginning with "#" */ +a[href^="#"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Links with "example" anywhere in the URL */ +a[href*="example"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Links with "insensitive" anywhere in the URL, + regardless of capitalization */ +a[href*="insensitive" i] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Links with "cAsE" anywhere in the URL, +with matching capitalization */ +a[href*="cAsE" s] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Links that end in ".org" */ +a[href$=".org"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Links that start with "https://" and end in ".org" */ +a[href^="https://"][href$=".org"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: 'class selector', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.red { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +.yellow-bg { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +.fancy { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: 'id selector', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +#blue { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: 'keyframe selector', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@keyframes slide-and-fade { + from { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + 50% { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + to { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, + { + name: 'namespace separator', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@namespace svgNamespace url("http://www.w3.org/2000/svg"); +@namespace htmlNameSpace url("http://www.w3.org/1999/xhtml"); +/* All \`\`s in the default namespace, in this case, all \`\`s */ +a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +/* no namespace */ +|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +/* all namespaces (including no namespace) */ +*|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +/* only the svgNamespace namespace, which is content */ +svgNamespace|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +/* The htmlNameSpace namespace, which is the HTML document */ +htmlNameSpace|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: 'selector list', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +h1, h2, h3, h4, h5, h6 { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +#main, +.content, +article, +h1 + p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: 'type selector', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +span { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: 'universal selector', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +* [lang^="en"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +*.warning { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +*#maincontent { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +.floating { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* automatically clear the next sibling after a floating element */ +.floating + * { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, +]; diff --git a/tests/less/selector/relative.test.ts b/tests/less/selector/relative.test.ts new file mode 100644 index 0000000..f713d75 --- /dev/null +++ b/tests/less/selector/relative.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'less', + printWidth: 60, + endingPosition: 'relative', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/less/variable/__snapshots__/absolute.test.ts.snap b/tests/less/variable/__snapshots__/absolute.test.ts.snap new file mode 100644 index 0000000..c15c9c9 --- /dev/null +++ b/tests/less/variable/__snapshots__/absolute.test.ts.snap @@ -0,0 +1,14 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'variable interpolation' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +// Variables +@my-selector: banner; + +// Usage +.@{my-selector} { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/less/variable/__snapshots__/relative.test.ts.snap b/tests/less/variable/__snapshots__/relative.test.ts.snap new file mode 100644 index 0000000..d02737b --- /dev/null +++ b/tests/less/variable/__snapshots__/relative.test.ts.snap @@ -0,0 +1,14 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'variable interpolation' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +// Variables +@my-selector: banner; + +// Usage +.@{my-selector} { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/less/variable/absolute.test.ts b/tests/less/variable/absolute.test.ts new file mode 100644 index 0000000..3d711e1 --- /dev/null +++ b/tests/less/variable/absolute.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'less', + printWidth: 60, + endingPosition: 'absolute', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/less/variable/fixtures.ts b/tests/less/variable/fixtures.ts new file mode 100644 index 0000000..5eea107 --- /dev/null +++ b/tests/less/variable/fixtures.ts @@ -0,0 +1,17 @@ +import type { Fixture } from '../../settings'; + +export const fixtures: Omit[] = [ + { + name: 'variable interpolation', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +// Variables +@my-selector: banner; + +// Usage +.@{my-selector} { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, +]; diff --git a/tests/less/variable/relative.test.ts b/tests/less/variable/relative.test.ts new file mode 100644 index 0000000..f713d75 --- /dev/null +++ b/tests/less/variable/relative.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'less', + printWidth: 60, + endingPosition: 'relative', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/scss/at-rule/__snapshots__/absolute.test.ts.snap b/tests/scss/at-rule/__snapshots__/absolute.test.ts.snap new file mode 100644 index 0000000..50e3d3e --- /dev/null +++ b/tests/scss/at-rule/__snapshots__/absolute.test.ts.snap @@ -0,0 +1,283 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'@color-profile' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@color-profile --swop5c { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +.header { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@container' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* A container context based on inline size */ +.post { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Apply styles if the container is narrower than 650px */ +@container (width < 650px) { + .card { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@counter-style' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@counter-style circled-alpha { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +.items { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@font-face' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@font-face { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +body { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@font-feature-values' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* At-rule for "nice-style" in Font One */ +@font-feature-values Font One { + @styleset { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} + +/* At-rule for "nice-style" in Font Two */ +@font-feature-values Font Two { + @styleset { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} + +/* Apply the at-rules with a single declaration */ +.nice-look { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@font-palette-values' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@import "https://fonts.googleapis.com/css2?family=Bungee+Spice"; +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +@font-palette-values --Alternate { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +.alternate { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@keyframes' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +@keyframes slide-in { + from { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } + + to { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@layer' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +@layer type { + .box p { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@media' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@media print { + body { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} + +@media screen { + body { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} + +@media screen, print { + body { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@page' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@page { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +section { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +@media print { + button { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@position-try' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@position-try --custom-left { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +@position-try --custom-bottom { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +@position-try --custom-right { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +@position-try --custom-bottom-right { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@property' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@property --myColor { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +@property --myWidth { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@scope' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@scope (.light-scheme) { + :scope { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } + + a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} + +@scope (.dark-scheme) { + :scope { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } + + a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@starting-style' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +#target { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +@starting-style { + #target { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@view-transition' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@view-transition { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/scss/at-rule/__snapshots__/relative.test.ts.snap b/tests/scss/at-rule/__snapshots__/relative.test.ts.snap new file mode 100644 index 0000000..95ad088 --- /dev/null +++ b/tests/scss/at-rule/__snapshots__/relative.test.ts.snap @@ -0,0 +1,283 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'@color-profile' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@color-profile --swop5c { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +.header { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@container' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* A container context based on inline size */ +.post { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Apply styles if the container is narrower than 650px */ +@container (width < 650px) { + .card { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@counter-style' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@counter-style circled-alpha { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +.items { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@font-face' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@font-face { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +body { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@font-feature-values' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* At-rule for "nice-style" in Font One */ +@font-feature-values Font One { + @styleset { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} + +/* At-rule for "nice-style" in Font Two */ +@font-feature-values Font Two { + @styleset { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} + +/* Apply the at-rules with a single declaration */ +.nice-look { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@font-palette-values' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@import "https://fonts.googleapis.com/css2?family=Bungee+Spice"; +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +@font-palette-values --Alternate { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +.alternate { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@keyframes' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +@keyframes slide-in { + from { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + + to { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@layer' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +@layer type { + .box p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@media' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@media print { + body { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} + +@media screen { + body { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} + +@media screen, print { + body { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@page' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@page { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +section { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +@media print { + button { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@position-try' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@position-try --custom-left { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +@position-try --custom-bottom { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +@position-try --custom-right { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +@position-try --custom-bottom-right { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@property' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@property --myColor { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +@property --myWidth { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'@scope' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@scope (.light-scheme) { + :scope { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + + a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} + +@scope (.dark-scheme) { + :scope { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + + a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@starting-style' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +#target { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +@starting-style { + #target { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'@view-transition' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@view-transition { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/scss/at-rule/absolute.test.ts b/tests/scss/at-rule/absolute.test.ts new file mode 100644 index 0000000..fb5c370 --- /dev/null +++ b/tests/scss/at-rule/absolute.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'scss', + printWidth: 60, + endingPosition: 'absolute', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/scss/at-rule/fixtures.ts b/tests/scss/at-rule/fixtures.ts new file mode 100644 index 0000000..2b1db16 --- /dev/null +++ b/tests/scss/at-rule/fixtures.ts @@ -0,0 +1,262 @@ +import type { Fixture } from '../../settings'; + +export const fixtures: Omit[] = [ + { + name: '@color-profile', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@color-profile --swop5c { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +.header { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '@container', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* A container context based on inline size */ +.post { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Apply styles if the container is narrower than 650px */ +@container (width < 650px) { + .card { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, + { + name: '@counter-style', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@counter-style circled-alpha { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +.items { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '@font-face', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@font-face { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +body { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '@font-feature-values', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* At-rule for "nice-style" in Font One */ +@font-feature-values Font One { + @styleset { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} + +/* At-rule for "nice-style" in Font Two */ +@font-feature-values Font Two { + @styleset { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} + +/* Apply the at-rules with a single declaration */ +.nice-look { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '@font-palette-values', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@import "https://fonts.googleapis.com/css2?family=Bungee+Spice"; +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +@font-palette-values --Alternate { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +.alternate { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '@keyframes', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +@keyframes slide-in { + from { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + + to { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, + { + name: '@layer', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +@layer type { + .box p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, + { + name: '@media', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@media print { + body { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} + +@media screen { + body { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} + +@media screen, print { + body { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, + { + name: '@page', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@page { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +section { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +@media print { + button { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, + { + name: '@position-try', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@position-try --custom-left { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +@position-try --custom-bottom { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +@position-try --custom-right { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +@position-try --custom-bottom-right { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '@property', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@property --myColor { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +@property --myWidth { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '@scope', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@scope (.light-scheme) { + :scope { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + + a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} + +@scope (.dark-scheme) { + :scope { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + + a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, + { + name: '@starting-style', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +#target { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +@starting-style { + #target { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, + { + name: '@view-transition', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@view-transition { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, +]; diff --git a/tests/scss/at-rule/relative.test.ts b/tests/scss/at-rule/relative.test.ts new file mode 100644 index 0000000..c1a2d5e --- /dev/null +++ b/tests/scss/at-rule/relative.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'scss', + printWidth: 60, + endingPosition: 'relative', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/scss/combinator/__snapshots__/absolute.test.ts.snap b/tests/scss/combinator/__snapshots__/absolute.test.ts.snap new file mode 100644 index 0000000..3844a9d --- /dev/null +++ b/tests/scss/combinator/__snapshots__/absolute.test.ts.snap @@ -0,0 +1,47 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'child combinator' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +span { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +div > span { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'descendant combinator' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +li { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +li li { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'next-sibling combinator' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +li:first-of-type + li { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'subsequent-sibling combinator' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p ~ span { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/scss/combinator/__snapshots__/relative.test.ts.snap b/tests/scss/combinator/__snapshots__/relative.test.ts.snap new file mode 100644 index 0000000..feea6dc --- /dev/null +++ b/tests/scss/combinator/__snapshots__/relative.test.ts.snap @@ -0,0 +1,47 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'child combinator' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +span { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +div > span { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'descendant combinator' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +li { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +li li { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'next-sibling combinator' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +li:first-of-type + li { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'subsequent-sibling combinator' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p ~ span { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/scss/combinator/absolute.test.ts b/tests/scss/combinator/absolute.test.ts new file mode 100644 index 0000000..fb5c370 --- /dev/null +++ b/tests/scss/combinator/absolute.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'scss', + printWidth: 60, + endingPosition: 'absolute', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/scss/combinator/fixtures.ts b/tests/scss/combinator/fixtures.ts new file mode 100644 index 0000000..731a5a0 --- /dev/null +++ b/tests/scss/combinator/fixtures.ts @@ -0,0 +1,48 @@ +import type { Fixture } from '../../settings'; + +export const fixtures: Omit[] = [ + { + name: 'child combinator', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +span { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +div > span { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: 'descendant combinator', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +li { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +li li { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: 'next-sibling combinator', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +li:first-of-type + li { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: 'subsequent-sibling combinator', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p ~ span { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, +]; diff --git a/tests/scss/combinator/relative.test.ts b/tests/scss/combinator/relative.test.ts new file mode 100644 index 0000000..c1a2d5e --- /dev/null +++ b/tests/scss/combinator/relative.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'scss', + printWidth: 60, + endingPosition: 'relative', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/scss/inheritance/__snapshots__/absolute.test.ts.snap b/tests/scss/inheritance/__snapshots__/absolute.test.ts.snap new file mode 100644 index 0000000..5ef8869 --- /dev/null +++ b/tests/scss/inheritance/__snapshots__/absolute.test.ts.snap @@ -0,0 +1,39 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'example' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* This CSS will print because %message-shared is extended. */ +%message-shared { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +// This CSS won't print because %equal-heights is never extended. +%equal-heights { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +.message { + @extend %message-shared; +} + +.success { + @extend %message-shared; + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +.error { + @extend %message-shared; + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +.warning { + @extend %message-shared; + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/scss/inheritance/__snapshots__/relative.test.ts.snap b/tests/scss/inheritance/__snapshots__/relative.test.ts.snap new file mode 100644 index 0000000..914e1f9 --- /dev/null +++ b/tests/scss/inheritance/__snapshots__/relative.test.ts.snap @@ -0,0 +1,39 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'example' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* This CSS will print because %message-shared is extended. */ +%message-shared { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +// This CSS won't print because %equal-heights is never extended. +%equal-heights { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +.message { + @extend %message-shared; +} + +.success { + @extend %message-shared; + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +.error { + @extend %message-shared; + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +.warning { + @extend %message-shared; + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/scss/inheritance/absolute.test.ts b/tests/scss/inheritance/absolute.test.ts new file mode 100644 index 0000000..fb5c370 --- /dev/null +++ b/tests/scss/inheritance/absolute.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'scss', + printWidth: 60, + endingPosition: 'absolute', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/scss/inheritance/fixtures.ts b/tests/scss/inheritance/fixtures.ts new file mode 100644 index 0000000..ef697e6 --- /dev/null +++ b/tests/scss/inheritance/fixtures.ts @@ -0,0 +1,38 @@ +import type { Fixture } from '../../settings'; + +export const fixtures: Omit[] = [ + { + name: 'example', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* This CSS will print because %message-shared is extended. */ +%message-shared { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +// This CSS won't print because %equal-heights is never extended. +%equal-heights { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +.message { + @extend %message-shared; +} + +.success { + @extend %message-shared; + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +.error { + @extend %message-shared; + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +.warning { + @extend %message-shared; + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, +]; diff --git a/tests/scss/inheritance/relative.test.ts b/tests/scss/inheritance/relative.test.ts new file mode 100644 index 0000000..c1a2d5e --- /dev/null +++ b/tests/scss/inheritance/relative.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'scss', + printWidth: 60, + endingPosition: 'relative', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/scss/mixin/__snapshots__/absolute.test.ts.snap b/tests/scss/mixin/__snapshots__/absolute.test.ts.snap new file mode 100644 index 0000000..e2acfc8 --- /dev/null +++ b/tests/scss/mixin/__snapshots__/absolute.test.ts.snap @@ -0,0 +1,20 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'example' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@mixin theme($theme: DarkGray) { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +.info { + @include theme; +} +.alert { + @include theme($theme: DarkRed); +} +.success { + @include theme($theme: DarkGreen); +} +" +`; diff --git a/tests/scss/mixin/__snapshots__/relative.test.ts.snap b/tests/scss/mixin/__snapshots__/relative.test.ts.snap new file mode 100644 index 0000000..5f53882 --- /dev/null +++ b/tests/scss/mixin/__snapshots__/relative.test.ts.snap @@ -0,0 +1,20 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'example' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@mixin theme($theme: DarkGray) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +.info { + @include theme; +} +.alert { + @include theme($theme: DarkRed); +} +.success { + @include theme($theme: DarkGreen); +} +" +`; diff --git a/tests/scss/mixin/absolute.test.ts b/tests/scss/mixin/absolute.test.ts new file mode 100644 index 0000000..fb5c370 --- /dev/null +++ b/tests/scss/mixin/absolute.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'scss', + printWidth: 60, + endingPosition: 'absolute', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/scss/mixin/fixtures.ts b/tests/scss/mixin/fixtures.ts new file mode 100644 index 0000000..7075e30 --- /dev/null +++ b/tests/scss/mixin/fixtures.ts @@ -0,0 +1,23 @@ +import type { Fixture } from '../../settings'; + +export const fixtures: Omit[] = [ + { + name: 'example', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@mixin theme($theme: DarkGray) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +.info { + @include theme; +} +.alert { + @include theme($theme: DarkRed); +} +.success { + @include theme($theme: DarkGreen); +} +`, + }, +]; diff --git a/tests/scss/mixin/relative.test.ts b/tests/scss/mixin/relative.test.ts new file mode 100644 index 0000000..c1a2d5e --- /dev/null +++ b/tests/scss/mixin/relative.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'scss', + printWidth: 60, + endingPosition: 'relative', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/scss/nesting/__snapshots__/absolute.test.ts.snap b/tests/scss/nesting/__snapshots__/absolute.test.ts.snap new file mode 100644 index 0000000..7031ab8 --- /dev/null +++ b/tests/scss/nesting/__snapshots__/absolute.test.ts.snap @@ -0,0 +1,22 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'example' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +nav { + ul { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } + + li { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } + + a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; diff --git a/tests/scss/nesting/__snapshots__/relative.test.ts.snap b/tests/scss/nesting/__snapshots__/relative.test.ts.snap new file mode 100644 index 0000000..7e0c0d5 --- /dev/null +++ b/tests/scss/nesting/__snapshots__/relative.test.ts.snap @@ -0,0 +1,22 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'example' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +nav { + ul { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + + li { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + + a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; diff --git a/tests/scss/nesting/absolute.test.ts b/tests/scss/nesting/absolute.test.ts new file mode 100644 index 0000000..fb5c370 --- /dev/null +++ b/tests/scss/nesting/absolute.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'scss', + printWidth: 60, + endingPosition: 'absolute', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/scss/nesting/fixtures.ts b/tests/scss/nesting/fixtures.ts new file mode 100644 index 0000000..dc1e974 --- /dev/null +++ b/tests/scss/nesting/fixtures.ts @@ -0,0 +1,21 @@ +import type { Fixture } from '../../settings'; + +export const fixtures: Omit[] = [ + { + name: 'example', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +nav { + ul { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + + li { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } + + a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, +]; diff --git a/tests/scss/nesting/relative.test.ts b/tests/scss/nesting/relative.test.ts new file mode 100644 index 0000000..c1a2d5e --- /dev/null +++ b/tests/scss/nesting/relative.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'scss', + printWidth: 60, + endingPosition: 'relative', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/scss/others/__snapshots__/absolute.test.ts.snap b/tests/scss/others/__snapshots__/absolute.test.ts.snap new file mode 100644 index 0000000..27f720e --- /dev/null +++ b/tests/scss/others/__snapshots__/absolute.test.ts.snap @@ -0,0 +1,57 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'endOfLine: crlf' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur + adipiscing elit proin ex massa hendrerit eu posuere; + } + } +} +" +`; + +exports[`'tabWidth: 4' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur + adipiscing elit proin ex massa hendrerit eu + posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur + adipiscing elit proin ex massa hendrerit eu + posuere; + } + } +} +" +`; + +exports[`'useTabs: true' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur + adipiscing elit proin ex massa hendrerit eu posuere; + } + } +} +" +`; diff --git a/tests/scss/others/__snapshots__/relative.test.ts.snap b/tests/scss/others/__snapshots__/relative.test.ts.snap new file mode 100644 index 0000000..713fdd1 --- /dev/null +++ b/tests/scss/others/__snapshots__/relative.test.ts.snap @@ -0,0 +1,55 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'endOfLine: crlf' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + } +} +" +`; + +exports[`'tabWidth: 4' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + } +} +" +`; + +exports[`'useTabs: true' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + } +} +" +`; diff --git a/tests/scss/others/absolute.test.ts b/tests/scss/others/absolute.test.ts new file mode 100644 index 0000000..fb5c370 --- /dev/null +++ b/tests/scss/others/absolute.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'scss', + printWidth: 60, + endingPosition: 'absolute', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/scss/others/fixtures.ts b/tests/scss/others/fixtures.ts new file mode 100644 index 0000000..824abde --- /dev/null +++ b/tests/scss/others/fixtures.ts @@ -0,0 +1,61 @@ +import type { Fixture } from '../../settings'; + +export const fixtures: Omit[] = [ + { + name: 'tabWidth: 4', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + } +} +`, + options: { + tabWidth: 4, + }, + }, + { + name: 'useTabs: true', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + } +} +`, + options: { + useTabs: true, + }, + }, + { + name: 'endOfLine: crlf', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + } +} +`, + options: { + endOfLine: 'crlf', + }, + }, +]; diff --git a/tests/scss/others/relative.test.ts b/tests/scss/others/relative.test.ts new file mode 100644 index 0000000..c1a2d5e --- /dev/null +++ b/tests/scss/others/relative.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'scss', + printWidth: 60, + endingPosition: 'relative', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/scss/prettier-ignore/__snapshots__/absolute.test.ts.snap b/tests/scss/prettier-ignore/__snapshots__/absolute.test.ts.snap new file mode 100644 index 0000000..7578fce --- /dev/null +++ b/tests/scss/prettier-ignore/__snapshots__/absolute.test.ts.snap @@ -0,0 +1,61 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'comments that contain the phrase \`pre…' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/** + * prettier-ignore + */ +h1, +h2, +h3, +h4, +h5, +h6 { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'ignore comment (1)' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* prettier-ignore */ +#blue { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } +" +`; + +exports[`'ignore comment (2)' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@keyframes slide-and-fade { + /* prettier-ignore */ + from { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } + 50% { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } + to { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'ignore comment (3)' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +nav { + ul { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } + + // prettier-ignore + li { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } + + a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; diff --git a/tests/scss/prettier-ignore/__snapshots__/relative.test.ts.snap b/tests/scss/prettier-ignore/__snapshots__/relative.test.ts.snap new file mode 100644 index 0000000..a8a70ad --- /dev/null +++ b/tests/scss/prettier-ignore/__snapshots__/relative.test.ts.snap @@ -0,0 +1,61 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'comments that contain the phrase \`pre…' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/** + * prettier-ignore + */ +h1, +h2, +h3, +h4, +h5, +h6 { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'ignore comment (1)' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* prettier-ignore */ +#blue { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } +" +`; + +exports[`'ignore comment (2)' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@keyframes slide-and-fade { + /* prettier-ignore */ + from { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } + 50% { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + to { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'ignore comment (3)' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +nav { + ul { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + + // prettier-ignore + li { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } + + a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; diff --git a/tests/scss/prettier-ignore/absolute.test.ts b/tests/scss/prettier-ignore/absolute.test.ts new file mode 100644 index 0000000..fb5c370 --- /dev/null +++ b/tests/scss/prettier-ignore/absolute.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'scss', + printWidth: 60, + endingPosition: 'absolute', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/scss/prettier-ignore/fixtures.ts b/tests/scss/prettier-ignore/fixtures.ts new file mode 100644 index 0000000..a863f53 --- /dev/null +++ b/tests/scss/prettier-ignore/fixtures.ts @@ -0,0 +1,54 @@ +import type { Fixture } from '../../settings'; + +export const fixtures: Omit[] = [ + { + name: 'ignore comment (1)', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* prettier-ignore */ +#blue { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } +`, + }, + { + name: 'ignore comment (2)', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@keyframes slide-and-fade { + /* prettier-ignore */ + from { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } + 50% { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } + to { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } +} +`, + }, + { + name: 'ignore comment (3)', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +nav { + ul { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + + // prettier-ignore + li { @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; } + + a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, + { + name: 'comments that contain the phrase `prettier-ignore` but do not prevent formatting', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/** + * prettier-ignore + */ +h1, h2, h3, h4, h5, h6 { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, +]; diff --git a/tests/scss/prettier-ignore/relative.test.ts b/tests/scss/prettier-ignore/relative.test.ts new file mode 100644 index 0000000..c1a2d5e --- /dev/null +++ b/tests/scss/prettier-ignore/relative.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'scss', + printWidth: 60, + endingPosition: 'relative', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/scss/pseudo-class/__snapshots__/absolute.test.ts.snap b/tests/scss/pseudo-class/__snapshots__/absolute.test.ts.snap new file mode 100644 index 0000000..7fc20a4 --- /dev/null +++ b/tests/scss/pseudo-class/__snapshots__/absolute.test.ts.snap @@ -0,0 +1,178 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`':active' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* Unvisited links */ +a:link { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +/* Visited links */ +a:visited { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +/* Hovered links */ +a:hover { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +/* Active links */ +a:active { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Active paragraphs */ +p:active { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`':checked' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +div, +select { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Labels for checked inputs */ +input:checked + label { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Radio element, when checked */ +input[type="radio"]:checked { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Checkbox element, when checked */ +input[type="checkbox"]:checked { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Option elements, when selected */ +option:checked { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`':disabled' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +input[type="text"]:disabled { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`':first-of-type' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p:first-of-type { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`':focus' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.red-input:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +.blue-input:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`':has()' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +section:has(.featured) { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`':hover' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +a:hover { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`':last-of-type' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p:last-of-type { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`':not()' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.fancy { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/*

elements that don't have a class \`.fancy\` */ +p:not(.fancy) { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Elements that are not

elements */ +body :not(p) { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Elements that are not

s or \`.fancy\` */ +body :not(div):not(.fancy) { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Elements that are not
s or \`.fancy\` */ +body :not(div, .fancy) { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Elements inside an

that aren't a with a class of \`.foo\` */ +h2 :not(span.foo) { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`':root' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +:root { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/scss/pseudo-class/__snapshots__/relative.test.ts.snap b/tests/scss/pseudo-class/__snapshots__/relative.test.ts.snap new file mode 100644 index 0000000..c3121f6 --- /dev/null +++ b/tests/scss/pseudo-class/__snapshots__/relative.test.ts.snap @@ -0,0 +1,178 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`':active' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* Unvisited links */ +a:link { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +/* Visited links */ +a:visited { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +/* Hovered links */ +a:hover { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +/* Active links */ +a:active { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Active paragraphs */ +p:active { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`':checked' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +div, +select { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Labels for checked inputs */ +input:checked + label { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Radio element, when checked */ +input[type="radio"]:checked { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Checkbox element, when checked */ +input[type="checkbox"]:checked { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Option elements, when selected */ +option:checked { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`':disabled' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +input[type="text"]:disabled { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`':first-of-type' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p:first-of-type { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`':focus' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.red-input:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +.blue-input:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`':has()' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +section:has(.featured) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`':hover' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +a:hover { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`':last-of-type' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p:last-of-type { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`':not()' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.fancy { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/*

elements that don't have a class \`.fancy\` */ +p:not(.fancy) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Elements that are not

elements */ +body :not(p) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Elements that are not

s or \`.fancy\` */ +body :not(div):not(.fancy) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Elements that are not
s or \`.fancy\` */ +body :not(div, .fancy) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Elements inside an

that aren't a with a class of \`.foo\` */ +h2 :not(span.foo) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`':root' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +:root { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/scss/pseudo-class/absolute.test.ts b/tests/scss/pseudo-class/absolute.test.ts new file mode 100644 index 0000000..fb5c370 --- /dev/null +++ b/tests/scss/pseudo-class/absolute.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'scss', + printWidth: 60, + endingPosition: 'absolute', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/scss/pseudo-class/fixtures.ts b/tests/scss/pseudo-class/fixtures.ts new file mode 100644 index 0000000..47b1f7c --- /dev/null +++ b/tests/scss/pseudo-class/fixtures.ts @@ -0,0 +1,166 @@ +import type { Fixture } from '../../settings'; + +export const fixtures: Omit[] = [ + { + name: ':active', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* Unvisited links */ +a:link { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +/* Visited links */ +a:visited { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +/* Hovered links */ +a:hover { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +/* Active links */ +a:active { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Active paragraphs */ +p:active { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: ':checked', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +div, +select { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Labels for checked inputs */ +input:checked + label { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Radio element, when checked */ +input[type="radio"]:checked { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Checkbox element, when checked */ +input[type="checkbox"]:checked { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Option elements, when selected */ +option:checked { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: ':disabled', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +input[type="text"]:disabled { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: ':first-of-type', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p:first-of-type { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: ':focus', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.red-input:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +.blue-input:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: ':has()', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +section:has(.featured) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: ':hover', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +a:hover { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: ':last-of-type', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p:last-of-type { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: ':not()', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.fancy { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/*

elements that don't have a class \`.fancy\` */ +p:not(.fancy) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Elements that are not

elements */ +body :not(p) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Elements that are not

s or \`.fancy\` */ +body :not(div):not(.fancy) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Elements that are not
s or \`.fancy\` */ +body :not(div, .fancy) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Elements inside an

that aren't a with a class of \`.foo\` */ +h2 :not(span.foo) { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: ':root', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +:root { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, +]; diff --git a/tests/scss/pseudo-class/relative.test.ts b/tests/scss/pseudo-class/relative.test.ts new file mode 100644 index 0000000..c1a2d5e --- /dev/null +++ b/tests/scss/pseudo-class/relative.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'scss', + printWidth: 60, + endingPosition: 'relative', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/scss/pseudo-element/__snapshots__/absolute.test.ts.snap b/tests/scss/pseudo-element/__snapshots__/absolute.test.ts.snap new file mode 100644 index 0000000..aa110a9 --- /dev/null +++ b/tests/scss/pseudo-element/__snapshots__/absolute.test.ts.snap @@ -0,0 +1,77 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'::after' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.exciting-text::after { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +.boring-text::after { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'::before' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +q::before { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +q::after { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'::first-letter' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +h2 + p::first-letter { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'::marker' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +ul li::marker { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'::placeholder' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +input::placeholder { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'::selection' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* Make selected text gold on a red background */ +::selection { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Make selected text in a paragraph white on a blue background */ +p::selection { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/scss/pseudo-element/__snapshots__/relative.test.ts.snap b/tests/scss/pseudo-element/__snapshots__/relative.test.ts.snap new file mode 100644 index 0000000..20967e7 --- /dev/null +++ b/tests/scss/pseudo-element/__snapshots__/relative.test.ts.snap @@ -0,0 +1,77 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'::after' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.exciting-text::after { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +.boring-text::after { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'::before' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +q::before { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +q::after { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'::first-letter' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +h2 + p::first-letter { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'::marker' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +ul li::marker { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'::placeholder' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +input::placeholder { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'::selection' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* Make selected text gold on a red background */ +::selection { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Make selected text in a paragraph white on a blue background */ +p::selection { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/scss/pseudo-element/absolute.test.ts b/tests/scss/pseudo-element/absolute.test.ts new file mode 100644 index 0000000..fb5c370 --- /dev/null +++ b/tests/scss/pseudo-element/absolute.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'scss', + printWidth: 60, + endingPosition: 'absolute', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/scss/pseudo-element/fixtures.ts b/tests/scss/pseudo-element/fixtures.ts new file mode 100644 index 0000000..4ae1782 --- /dev/null +++ b/tests/scss/pseudo-element/fixtures.ts @@ -0,0 +1,76 @@ +import type { Fixture } from '../../settings'; + +export const fixtures: Omit[] = [ + { + name: '::after', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.exciting-text::after { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +.boring-text::after { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '::before', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +q::before { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +q::after { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '::first-letter', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +h2 + p::first-letter { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '::marker', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +ul li::marker { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '::placeholder', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +input::placeholder { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: '::selection', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +/* Make selected text gold on a red background */ +::selection { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Make selected text in a paragraph white on a blue background */ +p::selection { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, +]; diff --git a/tests/scss/pseudo-element/relative.test.ts b/tests/scss/pseudo-element/relative.test.ts new file mode 100644 index 0000000..c1a2d5e --- /dev/null +++ b/tests/scss/pseudo-element/relative.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'scss', + printWidth: 60, + endingPosition: 'relative', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/scss/selector/__snapshots__/absolute.test.ts.snap b/tests/scss/selector/__snapshots__/absolute.test.ts.snap new file mode 100644 index 0000000..3a52635 --- /dev/null +++ b/tests/scss/selector/__snapshots__/absolute.test.ts.snap @@ -0,0 +1,206 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'& nesting selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur + adipiscing elit proin ex massa hendrerit eu posuere; + } + } +} +" +`; + +exports[`'attribute selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Internal links, beginning with "#" */ +a[href^="#"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Links with "example" anywhere in the URL */ +a[href*="example"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Links with "insensitive" anywhere in the URL, + regardless of capitalization */ +a[href*="insensitive" i] { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Links with "cAsE" anywhere in the URL, +with matching capitalization */ +a[href*="cAsE" s] { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Links that end in ".org" */ +a[href$=".org"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* Links that start with "https://" and end in ".org" */ +a[href^="https://"][href$=".org"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'class selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.red { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +.yellow-bg { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +.fancy { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'id selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +#blue { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'keyframe selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@keyframes slide-and-fade { + from { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } + 50% { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } + to { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'namespace separator' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@namespace svgNamespace url("http://www.w3.org/2000/svg"); +@namespace htmlNameSpace url("http://www.w3.org/1999/xhtml"); +/* All \`\`s in the default namespace, in this case, all \`\`s */ +a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +/* no namespace */ +|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +/* all namespaces (including no namespace) */ +*|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +/* only the svgNamespace namespace, which is content */ +svgNamespace|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +/* The htmlNameSpace namespace, which is the HTML document */ +htmlNameSpace|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'selector list' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +h1, +h2, +h3, +h4, +h5, +h6 { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +#main, +.content, +article, +h1 + p { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'type selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +span { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; + +exports[`'universal selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +* [lang^="en"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +*.warning { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +*#maincontent { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +.floating { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} + +/* automatically clear the next sibling after a floating element */ +.floating + * { + @apply lorem ipsum dolor sit amet consectetur adipiscing + elit proin ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/scss/selector/__snapshots__/relative.test.ts.snap b/tests/scss/selector/__snapshots__/relative.test.ts.snap new file mode 100644 index 0000000..51a7817 --- /dev/null +++ b/tests/scss/selector/__snapshots__/relative.test.ts.snap @@ -0,0 +1,206 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`'& nesting selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + } +} +" +`; + +exports[`'attribute selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Internal links, beginning with "#" */ +a[href^="#"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Links with "example" anywhere in the URL */ +a[href*="example"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Links with "insensitive" anywhere in the URL, + regardless of capitalization */ +a[href*="insensitive" i] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Links with "cAsE" anywhere in the URL, +with matching capitalization */ +a[href*="cAsE" s] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Links that end in ".org" */ +a[href$=".org"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* Links that start with "https://" and end in ".org" */ +a[href^="https://"][href$=".org"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'class selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.red { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +.yellow-bg { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +.fancy { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'id selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +#blue { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'keyframe selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@keyframes slide-and-fade { + from { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + 50% { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } + to { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; + } +} +" +`; + +exports[`'namespace separator' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@namespace svgNamespace url("http://www.w3.org/2000/svg"); +@namespace htmlNameSpace url("http://www.w3.org/1999/xhtml"); +/* All \`\`s in the default namespace, in this case, all \`\`s */ +a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +/* no namespace */ +|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +/* all namespaces (including no namespace) */ +*|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +/* only the svgNamespace namespace, which is content */ +svgNamespace|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +/* The htmlNameSpace namespace, which is the HTML document */ +htmlNameSpace|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'selector list' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +h1, +h2, +h3, +h4, +h5, +h6 { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +#main, +.content, +article, +h1 + p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'type selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +span { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; + +exports[`'universal selector' > expectation 1`] = ` +"/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +* [lang^="en"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +*.warning { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +*#maincontent { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +.floating { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} + +/* automatically clear the next sibling after a floating element */ +.floating + * { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin + ex massa hendrerit eu posuere; +} +" +`; diff --git a/tests/scss/selector/absolute.test.ts b/tests/scss/selector/absolute.test.ts new file mode 100644 index 0000000..fb5c370 --- /dev/null +++ b/tests/scss/selector/absolute.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'scss', + printWidth: 60, + endingPosition: 'absolute', +}; + +testSnapshotEach(fixtures, options); diff --git a/tests/scss/selector/fixtures.ts b/tests/scss/selector/fixtures.ts new file mode 100644 index 0000000..4d47374 --- /dev/null +++ b/tests/scss/selector/fixtures.ts @@ -0,0 +1,183 @@ +import type { Fixture } from '../../settings'; + +export const fixtures: Omit[] = [ + { + name: '& nesting selector', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.example { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + & > a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + &:hover, + &:focus { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + } +} +`, + }, + { + name: 'attribute selector', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Internal links, beginning with "#" */ +a[href^="#"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Links with "example" anywhere in the URL */ +a[href*="example"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Links with "insensitive" anywhere in the URL, + regardless of capitalization */ +a[href*="insensitive" i] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Links with "cAsE" anywhere in the URL, +with matching capitalization */ +a[href*="cAsE" s] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Links that end in ".org" */ +a[href$=".org"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* Links that start with "https://" and end in ".org" */ +a[href^="https://"][href$=".org"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: 'class selector', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +.red { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +.yellow-bg { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +.fancy { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: 'id selector', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +#blue { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: 'keyframe selector', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@keyframes slide-and-fade { + from { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + 50% { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } + to { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; + } +} +`, + }, + { + name: 'namespace separator', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +@namespace svgNamespace url("http://www.w3.org/2000/svg"); +@namespace htmlNameSpace url("http://www.w3.org/1999/xhtml"); +/* All \`\`s in the default namespace, in this case, all \`\`s */ +a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +/* no namespace */ +|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +/* all namespaces (including no namespace) */ +*|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +/* only the svgNamespace namespace, which is content */ +svgNamespace|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +/* The htmlNameSpace namespace, which is the HTML document */ +htmlNameSpace|a { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: 'selector list', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +h1, h2, h3, h4, h5, h6 { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +#main, +.content, +article, +h1 + p { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: 'type selector', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +span { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, + { + name: 'universal selector', + input: ` +/* --------------------------------------------------------| printWidth=60 (in snapshot) */ +* [lang^="en"] { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +*.warning { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +*#maincontent { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +.floating { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} + +/* automatically clear the next sibling after a floating element */ +.floating + * { + @apply lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere; +} +`, + }, +]; diff --git a/tests/scss/selector/relative.test.ts b/tests/scss/selector/relative.test.ts new file mode 100644 index 0000000..c1a2d5e --- /dev/null +++ b/tests/scss/selector/relative.test.ts @@ -0,0 +1,13 @@ +import { thisPlugin, testSnapshotEach } from '../../adaptor'; +import { baseOptions } from '../../settings'; +import { fixtures } from './fixtures'; + +const options = { + ...baseOptions, + plugins: [thisPlugin], + parser: 'scss', + printWidth: 60, + endingPosition: 'relative', +}; + +testSnapshotEach(fixtures, options);