fix: the effect of default style on custom class

src/pipeline/baseStyling.ts

@@ -6,46 +6,47 @@ import { transformer } from '../utils'
  */
 export const baseStyling = (transformer('baseStyling', 'metaExtracted', 'metaExtracted', (p) => {
  const style = createInlineStyle()
- .addCssVariable('md-text-color', '#111827')
- .addCssVariable('md-text-color', '#e5e7eb', 'html.dark')
- .addCssVariable('md-code-background', 'rgba(27,31,35,.05)')
- .addCssVariable('md-code-background', 'rgba(229, 231, 235, 0.65)', 'html.dark')
- .addCssVariable('code-font', 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace')
- .addClassDefinition(`.${p.options?.wrapperClasses}`, c => c
- .addProps({
- color: 'var(--md-text-color)',
- })
- .addChild('code', {
- fontSize: '85%',
- padding: '0.2em 0.3em',
- marginLeft: '0.1rem',
- marginRight: '0.1rem',
- backgroundColor: 'var(--md-code-background)',
- borderRadius: '3px',
- fontFamily: 'var(--code-font)',
- color: '#333',
- whiteSpace: 'pre',
- })
- .addChild('blockquote', {
- marginTop: 0,
- marginBottom: '0.25rem',
- padding: '0 1em',
- color: '#6a73737d',
- borderLeft: '0.25rem solid #dfe2e5',
- })
- .addChild('a', {
- cursor: 'pointer',
- })
- .addChild('a:hover', {
- backgroundColor: 'rgba(0,0,0,.5)',
- fontWeight: 700,
- borderRadius: '0.2rem 0.4rem',
+ if (p.options.wrapperClasses.includes('markdown-body')) {
+ style
+ .addCssVariable('md-text-color', '#111827')
+ .addCssVariable('md-text-color', '#e5e7eb', 'html.dark')
+ .addCssVariable('md-code-background', 'rgba(27,31,35,.05)')
+ .addCssVariable('md-code-background', 'rgba(229, 231, 235, 0.65)', 'html.dark')
+ .addCssVariable('code-font', 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace')
+ .addClassDefinition(`.${p.options.wrapperClasses}`, c => c
+ .addProps({
+ color: 'var(--md-text-color)',
+ })
+ .addChild('code', {
+ fontSize: '85%',
+ padding: '0.2em 0.3em',
+ marginLeft: '0.1rem',
+ marginRight: '0.1rem',
+ backgroundColor: 'var(--md-code-background)',
+ borderRadius: '3px',
+ fontFamily: 'var(--code-font)',
+ color: '#333',
+ whiteSpace: 'pre',
+ })
+ .addChild('blockquote', {
+ marginTop: 0,
+ marginBottom: '0.25rem',
+ padding: '0 1em',
+ color: '#6a73737d',
+ borderLeft: '0.25rem solid #dfe2e5',
+ })
+ .addChild('a', {
+ cursor: 'pointer',
+ })
+ .addChild('a:hover', {
+ backgroundColor: 'rgba(0,0,0,.5)',
+ fontWeight: 700,
+ borderRadius: '0.2rem 0.4rem',
+ }),
+ )
+ }
 
- }),
- )
- .finish()
-
- p.addStyleBlock('baseStyle', style)
+ p.addStyleBlock('baseStyle', style.finish())
 
  return p
 }))

test/wrapper-classes.test.ts

@@ -14,37 +14,31 @@ describe('Wrapper classes work as expected', () => {
  expect(sfc.html).toContain('markdown-body')
  })
 
+ it('changing the value of the \'wrapperClasses\' config to add styles to the original style', async () => {
+ const sfc = await composeSfcBlocks('wrapper.md', md, { wrapperClasses: 'markdown-body test-wrap' })
+ expect(sfc.html).toContain('test-wrap')
+ expect(sfc.html).toContain('markdown-body')
+ expect(sfc.html).toContain(':root')
+ })
+
  it('changing the value of the \'wrapperClasses\' configuration is reflected in the resulting HTML output', async () => {
  const sfc = await composeSfcBlocks('wrapper.md', md, { wrapperClasses: 'test-wrap' })
  expect(sfc.html).toContain('test-wrap')
  expect(sfc.html).not.toContain('markdown-body')
+ expect(sfc.html).not.toContain(':root')
  })
 
  it('changing the value of the \'wrapperClasses\' config to include multiple classes', async () => {
  const sfc = await composeSfcBlocks('wrapper.md', md, { wrapperClasses: 'prose m-auto' })
  expect(sfc.html).toContain('prose m-auto')
  expect(sfc.html).not.toContain('markdown-body')
+ expect(sfc.html).not.toContain(':root')
  })
 
  it('changing the value of the \'wrapperClasses\' config along with \'wrapperComponent\'', async () => {
  const sfc = await composeSfcBlocks('wrapper.md', md, { wrapperClasses: 'prose m-auto', wrapperComponent: 'post' })
  expect(sfc.html).toContain('prose m-auto')
  expect(sfc.html).not.toContain('markdown-body')
- })
-})
-
-describe('Snapshots for wrapper-testing', () => {
- beforeAll(async () => {
- md = await readFile('test/fixtures/simple.md', 'utf-8')
- })
-
- it('html is consistent for default config', async () => {
- const { html } = await composeSfcBlocks('/foobar/meta.md', md)
- expect(html).toMatchSnapshot()
- })
-
- it('html is consistent for explicit config', async () => {
- const { html } = await composeSfcBlocks('wrapper.md', md, { wrapperClasses: 'prose m-auto', wrapperComponent: 'post' })
- expect(html).toMatchSnapshot()
+ expect(sfc.html).not.toContain(':root')
  })
 })