Merge pull request #47 from ony3000/support-css

Support css, scss, and less

Author: ony3000

global.d.ts

@@ -31,6 +31,9 @@ declare global {
     | 'angular'
     | 'html'
     | 'vue'
+    | 'css'
+    | 'scss'
+    | 'less'
     | 'oxc'
     | 'oxc-ts'
     | 'astro'

package.json

@@ -43,7 +43,7 @@
     "esbuild": "0.25.0",
     "prettier": "3.8.1",
     "prettier-plugin-astro": "0.11.0",
-    "prettier-plugin-brace-style": "0.9.0",
+    "prettier-plugin-brace-style": "0.10.0",
     "prettier-plugin-classnames": "0.9.0",
     "prettier-plugin-space-before-function-paren": "0.0.7",
     "prettier-plugin-svelte": "3.0.0",

pnpm-lock.yaml

@@ -2,13 +2,17 @@ import type { Parser, ParserOptions, 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 type { SubstitutePatch } from './core-parts';
 import { makePatches, applyPatches } from './core-parts';
 
 const EOL = '\n';
 
+/**
+ * @deprecated This function 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.
+ */
 async function formatAsCodeblock(text: string, options: ParserOptions, plugins?: Plugin[]) {
   let codeblockStart = '```';
   const codeblockEnd = '```';
@@ -183,6 +187,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',

src/parsers.ts

@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`'two plugins whose formatting regions …' > expectation 1`] = `
+".callout
+{
+  @apply rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4 dark:border-neutral-500/30 dark:bg-neutral-900/50;
+}
+"
+`;
+
+exports[`'two plugins whose formatting regions …' > expectation 2`] = `
+".callout
+{
+  @apply rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4 dark:border-neutral-500/30 dark:bg-neutral-900/50;
+}
+"
+`;

tests/css/__snapshots__/multiple-plugin.test.ts.snap

@@ -0,0 +1,16 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`'brace-style plugin - standalone use' > expectation 1`] = `
+".callout
+{
+  @apply bg-gray-100/50 border border-zinc-400/30 dark:bg-neutral-900/50 dark:border-neutral-500/30 px-4 py-4 rounded-xl;
+}
+"
+`;
+
+exports[`'tailwindcss plugin - standalone use' > expectation 1`] = `
+".callout {
+  @apply rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4 dark:border-neutral-500/30 dark:bg-neutral-900/50;
+}
+"
+`;

tests/css/__snapshots__/single-plugin.test.ts.snap

@@ -0,0 +1,8 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`'no plugins' > expectation 1`] = `
+".callout {
+  @apply bg-gray-100/50 border border-zinc-400/30 dark:bg-neutral-900/50 dark:border-neutral-500/30 px-4 py-4 rounded-xl;
+}
+"
+`;

tests/css/__snapshots__/zero-plugin.test.ts.snap

@@ -0,0 +1,37 @@
+import { thisPlugin, braceStylePluginOptions, testSnapshotEach } from '../adaptor';
+import type { Fixture } from '../settings';
+import { baseOptions } from '../settings';
+
+const options = {
+  ...baseOptions,
+  parser: 'css',
+};
+
+const fixtures: Omit<Fixture, 'output'>[] = [
+  {
+    name: 'two plugins whose formatting regions are disjoint (1) - brace-style -> tailwindcss',
+    input: `
+.callout {
+  @apply bg-gray-100/50 border border-zinc-400/30 dark:bg-neutral-900/50 dark:border-neutral-500/30 px-4 py-4 rounded-xl;
+}
+`,
+    options: {
+      plugins: ['prettier-plugin-brace-style', 'prettier-plugin-tailwindcss', thisPlugin],
+      ...braceStylePluginOptions,
+    },
+  },
+  {
+    name: 'two plugins whose formatting regions are disjoint (2) - tailwindcss -> brace-style',
+    input: `
+.callout {
+  @apply bg-gray-100/50 border border-zinc-400/30 dark:bg-neutral-900/50 dark:border-neutral-500/30 px-4 py-4 rounded-xl;
+}
+`,
+    options: {
+      plugins: ['prettier-plugin-tailwindcss', 'prettier-plugin-brace-style', thisPlugin],
+      ...braceStylePluginOptions,
+    },
+  },
+];
+
+testSnapshotEach(fixtures, options);

tests/css/multiple-plugin.test.ts

@@ -0,0 +1,36 @@
+import { braceStylePluginOptions, testSnapshotEach } from '../adaptor';
+import type { Fixture } from '../settings';
+import { baseOptions } from '../settings';
+
+const options = {
+  ...baseOptions,
+  parser: 'css',
+};
+
+const fixtures: Omit<Fixture, 'output'>[] = [
+  {
+    name: 'brace-style plugin - standalone use',
+    input: `
+.callout {
+  @apply bg-gray-100/50 border border-zinc-400/30 dark:bg-neutral-900/50 dark:border-neutral-500/30 px-4 py-4 rounded-xl;
+}
+`,
+    options: {
+      plugins: ['prettier-plugin-brace-style'],
+      ...braceStylePluginOptions,
+    },
+  },
+  {
+    name: 'tailwindcss plugin - standalone use',
+    input: `
+.callout {
+  @apply bg-gray-100/50 border border-zinc-400/30 dark:bg-neutral-900/50 dark:border-neutral-500/30 px-4 py-4 rounded-xl;
+}
+`,
+    options: {
+      plugins: ['prettier-plugin-tailwindcss'],
+    },
+  },
+];
+
+testSnapshotEach(fixtures, options);

tests/css/single-plugin.test.ts

@@ -0,0 +1,24 @@
+import { testSnapshotEach } from '../adaptor';
+import type { Fixture } from '../settings';
+import { baseOptions } from '../settings';
+
+const options = {
+  ...baseOptions,
+  parser: 'css',
+};
+
+const fixtures: Omit<Fixture, 'output'>[] = [
+  {
+    name: 'no plugins',
+    input: `
+.callout {
+  @apply bg-gray-100/50 border border-zinc-400/30 dark:bg-neutral-900/50 dark:border-neutral-500/30 px-4 py-4 rounded-xl;
+}
+`,
+    options: {
+      plugins: [],
+    },
+  },
+];
+
+testSnapshotEach(fixtures, options);