forked from heybourn/headwind
-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
3e6fd9c
commit eb07b0d
Showing
9 changed files
with
1,146 additions
and
284 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| <p class="group block max-w-xs mx-auto rounded-lg p-6 bg-[#424242] ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500 border-[3px]"> | ||
| PHP Regex should be able to match the class property on this element | ||
| </p> | ||
| <p class=" min-h-screen flex w-full justify-center p-2 bg-[#165f67]"> | ||
| This has a class property that has tripped up the regex in the past, so we're testing it here for regression. | ||
| </p> | ||
|
|
||
| {{-- TODO: gather more real-world examples of class uses in PHP --}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| <p class="group block max-w-xs mx-auto rounded-lg p-6 bg-[#424242] ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500 border-[3px]"> | ||
| PHP Regex should be able to match the class property on this element | ||
| </p> | ||
| <p class=" min-h-screen flex w-full justify-center p-2 bg-[#165f67]"> | ||
| This has a class property that has tripped up the regex in the past, so we're testing it here for regression. | ||
| </p> | ||
|
|
||
| <!-- TODO: Gather more real-world examples of HTML uses of tailwind classes --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| // react needs to support all of the vanilla js examples | ||
|
|
||
| const html = ` | ||
| <p class="group block max-w-xs mx-auto rounded-lg p-6 bg-[#424242] ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500 border-[3px]"> | ||
| PHP Regex should be able to match the class property on this element | ||
| </p> | ||
| <p class=" min-h-screen flex w-full justify-center p-2 bg-[#165f67]"> | ||
| This has a class property that has tripped up the regex in the past, so we're testing it here for regression. | ||
| </p>`; | ||
|
|
||
| { | ||
| const className = 'group block max-w-xs mx-auto rounded-lg p-6 bg-[#424242] ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500 border-[3px]'; | ||
| const tw = 'group block max-w-xs mx-auto rounded-lg p-6 bg-[#424242] ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500 border-[3px] min-h-screen flex w-full justify-center p-2 bg-[#165f67]'; | ||
| } | ||
|
|
||
| { | ||
| const className = 'min-h-screen flex w-full justify-center p-2 bg-[#165f67]'; | ||
| const tw = 'min-h-screen flex w-full justify-center p-2 bg-[#165f67]'; | ||
| } | ||
|
|
||
| // React also needs to support uses of JSX | ||
|
|
||
| const p1 = <p className={'group block max-w-xs mx-auto rounded-lg p-6 bg-[#424242] ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500 border-[3px]'}> | ||
| PHP Regex should be able to match the class property on this element | ||
| </p>; | ||
| const p2 = <p className={'min-h-screen flex w-full justify-center p-2 bg-[#165f67]'}></p> | ||
|
|
||
| const p3 = <p className='group block max-w-xs mx-auto rounded-lg p-6 bg-[#424242] ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500 border-[3px] min-h-screen flex w-full justify-center p-2 bg-[#165f67]'></p> | ||
| const p4 = <p className='min-h-screen flex w-full justify-center p-2 bg-[#165f67]'></p> | ||
|
|
||
| const p5 = <p className="group block max-w-xs mx-auto rounded-lg p-6 bg-[#424242] ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500 border-[3px] min-h-screen flex w-full justify-center p-2 bg-[#165f67]"></p> | ||
| const p6 = <p className="min-h-screen flex w-full justify-center p-2 bg-[#165f67]"></p> | ||
|
|
||
| // TODO: gather more real-world examples of classnames in react |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| const html = ` | ||
| <p class="group block max-w-xs mx-auto rounded-lg p-6 bg-[#424242] ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500 border-[3px]"> | ||
| PHP Regex should be able to match the class property on this element | ||
| </p> | ||
| <p class=" min-h-screen flex w-full justify-center p-2 bg-[#165f67]"> | ||
| This has a class property that has tripped up the regex in the past, so we're testing it here for regression. | ||
| </p>`; | ||
|
|
||
| { | ||
| const className = 'group block max-w-xs mx-auto rounded-lg p-6 bg-[#424242] ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500 border-[3px]'; | ||
| const tw = 'group block max-w-xs mx-auto rounded-lg p-6 bg-[#424242] ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500 border-[3px] min-h-screen flex w-full justify-center p-2 bg-[#165f67]'; | ||
| } | ||
|
|
||
| { | ||
| const className = 'min-h-screen flex w-full justify-center p-2 bg-[#165f67]'; | ||
| const tw = 'min-h-screen flex w-full justify-center p-2 bg-[#165f67]'; | ||
| } | ||
|
|
||
| // TODO: gather more real-world examples of class attributes in JS |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| import pckge from '../package.json' assert { type: "json" }; | ||
| import { getTextMatch, buildMatchers } from '../src/utils.mjs'; | ||
| import { readFileSync } from 'fs'; | ||
| import path from 'path'; | ||
|
|
||
| import assert from 'assert'; | ||
| import { describe } from 'mocha'; | ||
|
|
||
| const langConfig = pckge.contributes.configuration[0].properties['tailwind-raw-reorder.classRegex'].default; | ||
|
|
||
| describe('Basic Regex', function () { | ||
| describe('PHP', function () { | ||
| const phpFilePath = path.resolve('./test/language_examples/example.blade.php'); | ||
| const phpFile = readFileSync(phpFilePath, 'utf8'); | ||
| const matchesTruth = phpFile.match(/class="((?:[^"{}<>]+|\\")+)"/g).map((value)=>{ | ||
| return value.match(/class="((?:[^"{}<>]+|\\")+)"/)[1]; | ||
| }) | ||
| const matches = []; | ||
| const matchers = buildMatchers( langConfig['php'] ); | ||
| for (const matcher of matchers) { | ||
| getTextMatch(matcher.regex, phpFile, (text, startPosition) => { | ||
| matches.push(text); | ||
| }); | ||
| } | ||
| it('should match all classes', function () { | ||
| assert.deepEqual(matches, matchesTruth); | ||
| }); | ||
| }); | ||
|
|
||
| describe('HTML', function () { | ||
| const htmlFilePath = path.resolve('./test/language_examples/example.html'); | ||
| const htmlFile = readFileSync(htmlFilePath, 'utf8'); | ||
| const matchesTruth = htmlFile.match(/class="((?:[^"{}<>]+|\\")+)"/g).map((value)=>{ | ||
| return value.match(/class="((?:[^"{}<>]+|\\")+)"/)[1]; | ||
| }) | ||
| const matches = []; | ||
| const matchers = buildMatchers( langConfig['html'] ); | ||
| for (const matcher of matchers) { | ||
| getTextMatch(matcher.regex, htmlFile, (text, startPosition) => { | ||
| matches.push(text); | ||
| }); | ||
| } | ||
| it('should match all classes', function () { | ||
| assert.deepEqual(matches, matchesTruth); | ||
| }); | ||
| }); | ||
|
|
||
| describe('JS', function () { | ||
| const jsFilePath = path.resolve('./test/language_examples/example.vanilla.js'); | ||
| const jsFile = readFileSync(jsFilePath, 'utf8'); | ||
| const matchesTruth = jsFile.match(/(?:class(?:Name)?|tw)\s*=\s*(["'`])(?:(?:[^{}<>](?!\1))|\\\1)+[^{}<>]\1/g).map((value)=>{ | ||
| return value.match(/(?:class(?:Name)?|tw)\s*=\s*(["'`])((?:(?:[^{}<>](?!\1))|\\\1)+[^{}<>])\1/)[2]; | ||
| }) | ||
| const matches = []; | ||
| const matchers = buildMatchers( langConfig['javascript'] ); | ||
| for (const matcher of matchers) { | ||
| getTextMatch(matcher.regex, jsFile, (text, startPosition) => { | ||
| matches.push(text); | ||
| }); | ||
| } | ||
| it('should match all classes', function () { | ||
| assert.deepEqual(matches, matchesTruth); | ||
| }); | ||
| }); | ||
|
|
||
| describe('Javascript React', function () { | ||
| const jsxFilePath = path.resolve('./test/language_examples/example.react.jsx'); | ||
| const jsxFile = readFileSync(jsxFilePath, 'utf8'); | ||
| const matchesTruth = jsxFile.match(/(?:class(?:Name)?|tw)\s*=\s*{?(["'`])(?:(?:[^{}<>](?!\1))|\\\1)+[^{}<>]\1/g).map((value)=>{ | ||
| return value.match(/(?:class(?:Name)?|tw)\s*=\s*{?(["'`])((?:(?:[^{}<>](?!\1))|\\\1)+[^{}<>])\1/)[2]; | ||
| }); | ||
| const matches = []; | ||
| const matchers = buildMatchers( langConfig['javascriptreact'] ); | ||
| for (const matcher of matchers) { | ||
| getTextMatch(matcher.regex, jsxFile, (text, startPosition) => { | ||
| matches.push(text); | ||
| }); | ||
| } | ||
| it('should match all classes', function () { | ||
| assert.deepEqual(matches, matchesTruth); | ||
| }); | ||
| }); | ||
| }); |