@teleporthq/teleport-plugin-css 0.44.0-alpha.0 → 0.44.0

package/__tests__/component-scoped.ts

@@ -90,7 +90,7 @@ describe('Component Scoped Styles', () => {
     expect(
       jsxComponent.meta.nodesLookup.container.openingElement.attributes[0].value.expression
         .quasis[0].value.raw
-    ).toBe('md-8 primary-navbar ')
+    ).toBe('md-8 my-componentprimary-navbar ')
     expect(
       jsxComponent.meta.nodesLookup.container.openingElement.attributes[0].value.expression
         .expressions[0].property.name
@@ -148,7 +148,9 @@ describe('Component Scoped Styles', () => {
     const { chunks } = await plugin(structure)
     const hastComponent = chunks.find((chunk) => chunk.name === 'template')
 
-    expect(hastComponent.meta.nodesLookup.container.properties['class']).toBe('md-8 primary-navbar')
+    expect(hastComponent.meta.nodesLookup.container.properties['class']).toBe(
+      'md-8 my-componentprimary-navbar'
+    )
     expect(hastComponent.meta.nodesLookup.container.properties['v-bind:class']).toBe('variant')
   })
 })

package/__tests__/referenced-styles.ts

@@ -199,3 +199,64 @@ describe('Referenced Styles for inlined and project-referenced with JSX bases No
     expect(cssFile.content).toContain('@media(max-width: 991px)')
   })
 })
+
+describe('An element’s own styles, weighed like the Next export’s (doubleElementClass)', () => {
+  const run = async (doubleElementClass: boolean) => {
+    const plugin = createCSSPlugin({ templateChunkName: 'template', doubleElementClass })
+    const componentChunk: ChunkDefinition = setUpHASTChunk()
+    const referencedStyles: UIDLReferencedStyles = {
+      narrow: {
+        type: 'style-map',
+        content: {
+          mapType: 'inlined',
+          conditions: [{ conditionType: 'screen-size', maxWidth: 991 }],
+          styles: { color: staticNode('green') },
+        },
+      },
+      hovered: {
+        type: 'style-map',
+        content: {
+          mapType: 'inlined',
+          conditions: [{ conditionType: 'element-state', content: 'hover' }],
+          styles: { color: staticNode('orange') },
+        },
+      },
+    }
+    const element = elementNode(
+      'container',
+      {},
+      [],
+      null,
+      { color: staticNode('white') },
+      null,
+      referencedStyles
+    )
+    element.content.key = 'container'
+    const result = await plugin({
+      uidl: component('test', element),
+      options: {},
+      chunks: [componentChunk],
+      dependencies: {},
+    })
+    const css = result.chunks.find((chunk) => chunk.fileType === FileType.CSS)?.content ?? ''
+    return { css, classAttr: componentChunk.meta.nodesLookup.container.properties.class }
+  }
+
+  it('writes the class twice in every rule, so it beats a two-class combinator as it does there', async () => {
+    const { css, classAttr } = await run(true)
+    expect(css).toMatch(/\.container\.container\s*\{\s*color: white;/)
+    expect(css).toMatch(/\.container\.container:hover\s*\{\s*color: orange;/)
+    expect(css).toMatch(
+      /@media\(max-width: 991px\)\s*\{\s*\.container\.container\s*\{\s*color: green;/
+    )
+    // the element wears it once, and no escaped dot ever reaches the stylesheet
+    expect(classAttr).toBe('container')
+    expect(css).not.toContain('\\.')
+  })
+
+  it('leaves every other export exactly as it was', async () => {
+    const { css } = await run(false)
+    expect(css).toMatch(/\.container\s*\{\s*color: white;/)
+    expect(css).not.toContain('.container.container')
+  })
+})

package/__tests__/selector-paren-sanitize.ts

@@ -0,0 +1,69 @@
+import { UIDLStyleSetDefinition } from '@teleporthq/teleport-types'
+import { staticNode } from '@teleporthq/teleport-uidl-builders'
+import { sanitizeStylesheetSelectors } from '../src/utils'
+import { createStyleSheetPlugin } from '../src/style-sheet'
+import { setUpStructureWithHASTChunk } from './mocks'
+
+// A stray `)` in a CSS selector makes the production cssnano selector parser throw
+// "Expected an opening parenthesis", failing the consumer's whole `next build`,
+// even though `next dev` silently tolerates it. The generated stylesheet must
+// therefore never ship a selector with unbalanced parentheses.
+describe('sanitizeStylesheetSelectors', () => {
+  it('drops an unmatched closing paren in a selector', () => {
+    expect(sanitizeStylesheetSelectors('.foo) { color: red }')).toBe('.foo { color: red }')
+    expect(sanitizeStylesheetSelectors('.a:hover) { color: red }')).toBe('.a:hover { color: red }')
+    expect(sanitizeStylesheetSelectors('.a:not(.b)) { color: red }')).toBe(
+      '.a:not(.b) { color: red }'
+    )
+  })
+
+  it('closes an unmatched opening paren in a selector', () => {
+    expect(sanitizeStylesheetSelectors('.a:not(.b { color: red }')).toBe(
+      '.a:not(.b ){ color: red }'
+    )
+  })
+
+  it('repairs selectors nested inside @media blocks', () => {
+    expect(sanitizeStylesheetSelectors('@media (max-width: 768px) { .x) { color: red } }')).toBe(
+      '@media (max-width: 768px) { .x { color: red } }'
+    )
+  })
+
+  it('leaves well-formed selectors untouched (idempotent)', () => {
+    const good = [
+      '.valid:nth-child(2n+1) { color: red }',
+      '.ok:not(.x) .y { color: green }',
+      '.btn:hover:not(:disabled) { color: blue }',
+      '[data-x=")"] { color: red }',
+      '@media (max-width: 991px) { .a { color: red } }',
+    ]
+    good.forEach((css) => {
+      expect(sanitizeStylesheetSelectors(css)).toBe(css)
+      expect(sanitizeStylesheetSelectors(sanitizeStylesheetSelectors(css))).toBe(css)
+    })
+  })
+})
+
+describe('plugin-css emits balanced selectors', () => {
+  it('repairs a malformed subselector so the stylesheet has no stray paren', async () => {
+    const plugin = createStyleSheetPlugin()
+    const structure = setUpStructureWithHASTChunk()
+    const styleSetDefinitions: Record<string, UIDLStyleSetDefinition> = {
+      cardId: {
+        type: 'reusable-project-style-map',
+        content: { color: staticNode('red') },
+        className: 'card',
+        // Stray `)` in the (unescaped) subselector — an AI-authored typo that
+        // would otherwise ship `.card:hover:not(.x)) { … }` and break cssnano.
+        subselectors: ':hover:not(.x))',
+      },
+    }
+    structure.uidl = { ...structure.uidl, styleSetDefinitions }
+
+    const { chunks } = await plugin(structure)
+    const { content } = chunks.find((chunk) => chunk.fileType === 'css')
+
+    expect(content).toContain('.card:hover:not(.x)')
+    expect(content).not.toMatch(/:not\(\.x\)\)/)
+  })
+})

package/dist/cjs/index.d.ts

@@ -6,11 +6,19 @@ interface CSSPluginConfig {
     componentDecoratorChunkName: string;
     inlineStyleAttributeKey: string;
     classAttributeName: string;
-    forceScoping: boolean;
     templateStyle: 'html' | 'jsx';
     declareDependency: 'import' | 'decorator' | 'none';
     dynamicVariantPrefix?: string;
     staticPropReferences?: boolean;
+    standaloneHtmlComponents?: boolean;
+    /**
+     * An element's own styles written under its class twice (`.title.title`),
+     * the weight of two classes. The Next export's styled-jsx scopes them with a
+     * second class and the editor weighs them the same, so an element's own
+     * colour beats a two-class combinator like `.hero .title` there; under one
+     * class it lost in the static HTML export, which showed another colour.
+     */
+    doubleElementClass?: boolean;
 }
 declare const createCSSPlugin: ComponentPluginFactory<CSSPluginConfig>;
 export { createStyleSheetPlugin, createCSSPlugin };

package/dist/cjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,sBAAsB,EACtB,eAAe,EAShB,MAAM,4BAA4B,CAAA;AACnC,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAA;AAEtD,UAAU,eAAe;IACvB,SAAS,EAAE,MAAM,CAAA;IACjB,iBAAiB,EAAE,MAAM,CAAA;IACzB,2BAA2B,EAAE,MAAM,CAAA;IACnC,uBAAuB,EAAE,MAAM,CAAA;IAC/B,kBAAkB,EAAE,MAAM,CAAA;IAC1B,YAAY,EAAE,OAAO,CAAA;IACrB,aAAa,EAAE,MAAM,GAAG,KAAK,CAAA;IAC7B,iBAAiB,EAAE,QAAQ,GAAG,WAAW,GAAG,MAAM,CAAA;IAClD,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B;AAED,QAAA,MAAM,eAAe,EAAE,sBAAsB,CAAC,eAAe,CAyU5D,CAAA;AAED,OAAO,EAAE,sBAAsB,EAAE,eAAe,EAAE,CAAA;;AAElD,wBAAgC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAWA,OAAO,EACL,sBAAsB,EACtB,eAAe,EAkBhB,MAAM,4BAA4B,CAAA;AACnC,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAA;AAGtD,UAAU,eAAe;IACvB,SAAS,EAAE,MAAM,CAAA;IACjB,iBAAiB,EAAE,MAAM,CAAA;IACzB,2BAA2B,EAAE,MAAM,CAAA;IACnC,uBAAuB,EAAE,MAAM,CAAA;IAC/B,kBAAkB,EAAE,MAAM,CAAA;IAC1B,aAAa,EAAE,MAAM,GAAG,KAAK,CAAA;IAC7B,iBAAiB,EAAE,QAAQ,GAAG,WAAW,GAAG,MAAM,CAAA;IAClD,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAClC;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAqBD,QAAA,MAAM,eAAe,EAAE,sBAAsB,CAAC,eAAe,CAs1B5D,CAAA;AAED,OAAO,EAAE,sBAAsB,EAAE,eAAe,EAAE,CAAA;;AAElD,wBAAgC"}