diff --git a/template-parser-helper.js b/template-parser-helper.js index 5f0cb42..1afa09b 100644 --- a/template-parser-helper.js +++ b/template-parser-helper.js @@ -86,7 +86,14 @@ module.exports = { function parseTemplateLiteralStyles(styles, input, range) { const offset = input.quasis[0].start; const source = input.css; - const parseStyle = docFixer(offset, source, input.parseOptions); + + const opts = Object.assign({}, input.parseOptions); + + delete opts.templateLiteralStyles; + delete opts.expressions; + delete opts.quasis; + + const parseStyle = docFixer(offset, source, opts); const nodes = []; let index = range[0]; diff --git a/test/fixtures/styled-components-nesting-expr.js b/test/fixtures/styled-components-nesting-expr.js new file mode 100644 index 0000000..8e515eb --- /dev/null +++ b/test/fixtures/styled-components-nesting-expr.js @@ -0,0 +1,11 @@ +import styled, { css } from 'styled-components'; +const StyledComponent = styled.div` + margin: 8px 0; + + ${() => + css` + div { + ${expr}; + } + `} +`; diff --git a/test/fixtures/styled-components-nesting-expr.js.json b/test/fixtures/styled-components-nesting-expr.js.json new file mode 100644 index 0000000..a05193a --- /dev/null +++ b/test/fixtures/styled-components-nesting-expr.js.json @@ -0,0 +1,200 @@ +{ + "raws": {}, + "type": "root", + "nodes": [ + { + "raws": { + "semicolon": false, + "after": "\n" + }, + "type": "root", + "nodes": [ + { + "raws": { + "before": "\n ", + "between": ": " + }, + "type": "decl", + "source": { + "start": { + "line": 3, + "column": 3 + }, + "input": { + "file": "styled-components-nesting-expr.js", + "quasis": [ + { + "start": 84, + "end": 105 + }, + { + "start": 165, + "end": 166 + } + ] + }, + "end": { + "line": 3, + "column": 16 + } + }, + "prop": "margin", + "value": "8px 0" + }, + { + "raws": { + "before": "\n\n " + }, + "text": "${() =>\n css`\n div {\n ${expr};\n }\n `}", + "type": "literal", + "source": { + "start": { + "line": 5, + "column": 3 + }, + "input": { + "file": "styled-components-nesting-expr.js", + "quasis": [ + { + "start": 84, + "end": 105 + }, + { + "start": 165, + "end": 166 + } + ] + } + }, + "nodes": [ + { + "raws": { + "semicolon": false, + "after": "\n " + }, + "type": "root", + "nodes": [ + { + "raws": { + "before": "\n ", + "between": " ", + "semicolon": false, + "after": "\n " + }, + "type": "rule", + "nodes": [ + { + "raws": { + "before": "\n ", + "ownSemicolon": ";" + }, + "text": "${expr}", + "type": "literal", + "source": { + "start": { + "line": 8, + "column": 9 + }, + "input": { + "file": "styled-components-nesting-expr.js", + "quasis": [ + { + "start": 121, + "end": 142 + }, + { + "start": 149, + "end": 163 + } + ] + } + } + } + ], + "source": { + "start": { + "line": 7, + "column": 7 + }, + "input": { + "file": "styled-components-nesting-expr.js", + "quasis": [ + { + "start": 121, + "end": 142 + }, + { + "start": 149, + "end": 163 + } + ] + }, + "end": { + "line": 9, + "column": 7 + } + }, + "selector": "div" + } + ], + "source": { + "input": { + "file": "styled-components-nesting-expr.js", + "quasis": [ + { + "start": 121, + "end": 142 + }, + { + "start": 149, + "end": 163 + } + ] + }, + "start": { + "line": 6, + "column": 9 + }, + "inline": false, + "lang": "template-literal", + "syntax": {} + } + } + ] + } + ], + "source": { + "input": { + "file": "styled-components-nesting-expr.js", + "quasis": [ + { + "start": 84, + "end": 105 + }, + { + "start": 165, + "end": 166 + } + ] + }, + "start": { + "line": 2, + "column": 36 + }, + "inline": false, + "lang": "template-literal", + "syntax": {} + } + } + ], + "source": { + "input": { + "file": "styled-components-nesting-expr.js" + }, + "start": { + "line": 1, + "column": 1 + }, + "lang": "jsx" + } +} diff --git a/test/supports.js b/test/supports.js index daf60b4..bd89188 100644 --- a/test/supports.js +++ b/test/supports.js @@ -42,6 +42,7 @@ describe('should support for each CSS in JS package', () => { 'lit-css.mjs', 'react-emotion.jsx', 'react-native.mjs', + 'styled-components-nesting-expr.js', 'styled-components-nesting.js', 'styled-components-nesting2.js', 'styled-components-nesting3.js',