diff --git a/__tests__/media.spec.ts b/__tests__/media.spec.ts new file mode 100644 index 0000000..1ef739a --- /dev/null +++ b/__tests__/media.spec.ts @@ -0,0 +1,74 @@ +import { extractUnmatchableFromAst } from '../src/getCSS'; +import { fromAst } from '../src/parser/fromAst'; +import { buildAst } from '../src/parser/toAst'; + +describe('media selectors', () => { + const CSS = ` + .a { + border:2px solid; + } + .b { + border:1px solid; + } + .d { position: relative; } + + @media only screen and (max-width: 600px) { + .a { position: relative; } + .b { position: relative; } + .c { position: relative; } + } + + @media only screen and (max-width: 600px) { + .c { color: red; } + } + + @media only print { + .c { position: relative; } + } + + body { color: red } + + .a, .b, input { color: rightColor } + `; + + const ast = buildAst(CSS); + + it('should return nothing if nothing used', () => { + const css = fromAst([], ast); + expect(css).toEqual(''); + }); + + it('should extract unmatable parts', () => { + const css = extractUnmatchableFromAst({ ast }); + expect(css[0].css).toEqual(`body { color: red; } +input { color: rightColor; } +`); + }); + + it('should return what was used', () => { + const css = fromAst(['d'], ast); + expect(css.trim()).toEqual('.d { position: relative; }'); + }); + + it('should use media if not used: case a', () => { + const css = fromAst(['a'], ast); + expect(css.trim()).toEqual(`.a { border: 2px solid; } + +@media only screen and (max-width: 600px) { +.a { position: relative; } +} + +.a { color: rightColor; }`); + }); + + it('should use media if not used: case c', () => { + const css = fromAst(['c'], ast); + expect(css.trim()).toEqual(`@media only screen and (max-width: 600px) { +.c { position: relative; } +.c { color: red; } +} +@media only print { +.c { position: relative; } +}`); + }); +}); diff --git a/src/getCSS.ts b/src/getCSS.ts index 07be344..a3976d3 100644 --- a/src/getCSS.ts +++ b/src/getCSS.ts @@ -1,4 +1,5 @@ import { kashe } from 'kashe'; +import { StyleAst } from './parser/ast'; import { extractUnmatchable, fromAst, getUnmatchableRules } from './parser/fromAst'; import { FlagType, StyleChunk, StyleDefinition, UsedTypes, UsedTypesRef } from './types'; import { assertIsReady, getStylesInText, unique } from './utils'; @@ -92,10 +93,10 @@ export const wrapInStyle = (styles: string, usedStyles: string[] = []) => }">${styles}` : ''; -export const extractAllUnmatchable = kashe((def: StyleDefinition): StyleChunk[] => - Object.keys(def.ast || {}) +export const extractUnmatchableFromAst = kashe((ast: StyleAst): StyleChunk[] => + Object.keys(ast || {}) .map(file => { - const css = extractUnmatchable(def.ast[file]); + const css = extractUnmatchable(ast[file]); if (css) { return { file, @@ -108,6 +109,8 @@ export const extractAllUnmatchable = kashe((def: StyleDefinition): StyleChunk[] .map(x => x as StyleChunk) ); +export const extractAllUnmatchable = (def: StyleDefinition): StyleChunk[] => extractUnmatchableFromAst(def.ast); + export const extractAllUnmatchableAsString = kashe((def: StyleDefinition) => wrapInStyle( extractAllUnmatchable(def).reduce((acc, { css }) => acc + css, ''),