Align logic with styled-components

Author: Augustach

plugin/plugin.js

@@ -121,20 +121,25 @@ function parseCss(cssText, substitutionMap) {
                 .replace(/\/\/.*(?=\n|$)/g, '') // remove // comments
         )
     }
+    const pattern = new RegExp(`^\\d+\\.${MAGIC_NUMBER}`)
+    function startsWithSubstitution(line) {
+        return pattern.test(line)
+    }
     cssText = removeComments(cssText)
-    const lines = cssText.split('\n')
+    const SEPARATOR = ';'
+    const lines = cssText.split('\n').reduce((acc, line) => acc.concat(line.split(SEPARATOR)), [])
+    const processedLines = []
     let styles = []
     for (let i = 0; i < lines.length; i++) {
         let line = lines[i].trim()
-        if (line.endsWith(';')) {
-            line = line.substring(0, line.length - 1)
+        if (startsWithSubstitution(line) && substitutionMap[line]) {
+            line = `${MIXIN}:${line}`
         }
-        if (substitutionMap[line]) { // mixin
-            styles.push([MIXIN, line])
-            lines[i] = ''
+        if (line) {
+            processedLines.push(line)
         }
     }
-    cssText = lines.join('')
+    cssText = processedLines.join(SEPARATOR)
     const { nodes } = postcss.parse(cssText)
     for (const node of nodes) {
         if (node.type === 'decl') {
@@ -180,7 +185,7 @@ function buildCssObject(identifier, t, substitutions) {
                     const elements = []
                     const expressions = []
                     if (substitutions[value]) {
-                        return substitutions[value]
+                        return inject(substitutions[value])
                     }
                     const matches = splitSubstitution(value)
                     for (const match of matches) {

plugin/transform.js

@@ -32,9 +32,11 @@ const stringKeys = [
     'textDecorationLine',
 ]
 
-const runtimeKeys = ['border', 'boxShadow']
+const mapper = {
+    background: 'backgroundColor'
+}
 
-const withoutTransform = (key, value) => ({ [key]: value })
+const runtimeKeys = ['border', 'boxShadow']
 
 const isSurrounded = (value, char) => value[0] === char && value[value.length - 1] === char
 const stringTransform = (key, value) => {
@@ -45,7 +47,7 @@ const stringTransform = (key, value) => {
 }
 const runtimeTransform = (key, value) => ({ 'RUNTIME_': [key, value] })
 
-const colorTransforms = colorKeys.map((key) => [key, withoutTransform])
+const colorTransforms = colorKeys.map((key) => [key, stringTransform])
 const stringTransforms = stringKeys.map((key) => [key, stringTransform])
 const runtimeTransforms = runtimeKeys.map((key) => [key, runtimeTransform])
 
@@ -57,6 +59,7 @@ const CustomTransformers = Object.fromEntries(
 )
 
 function transform(key, value) {
+    key = mapper[key] ?? key
     let result
     try {
         const transformer = CustomTransformers[key] ?? getStylesForProperty

src/__tests__/buildDynamicStyles.test.ts

@@ -121,4 +121,50 @@ describe('buildDynamicStyles', () => {
             borderColor: 'black',
         })
     })
+
+    test('Should override styles', () => {
+        const { css } = createStyled()
+        const props = {
+            theme: {},
+        }
+        let styles = buildDynamicStyles(props, [
+            ['height', 2],
+        ])
+
+        expect(styles).toStrictEqual({
+            height: 2,
+        })
+
+        const css1 = css([
+            ['height', 1],
+        ])
+        styles = buildDynamicStyles(props, [
+            ['MIXIN_', css1],
+            ['height', 2],
+        ])
+        expect(styles).toStrictEqual({
+            height: 2,
+        })
+
+        styles = buildDynamicStyles(props, [
+            ['height', 2],
+            ['MIXIN_', css1],
+        ])
+        expect(styles).toStrictEqual({
+            height: 1,
+        })
+
+        const css2 = css([
+            ['height', 4],
+            ['MIXIN_', css1],
+        ])
+
+        styles = buildDynamicStyles(props, [
+            ['height', 20],
+            ['MIXIN_', css2],
+        ])
+        expect(styles).toStrictEqual({
+            height: 1,
+        })
+    })
 })

src/__tests__/buildPropsFromAttrs.test.ts

@@ -1,4 +1,4 @@
-import { buildPropsFromAttrs} from '../buildPropsFromAttrs'
+import { buildPropsFromAttrs } from '../buildPropsFromAttrs'
 
 describe('buildPropsFromAttrs', () => {
     test('Should combine passed props', () => {
@@ -25,7 +25,7 @@ describe('buildPropsFromAttrs', () => {
             props2: true,
             number: 2,
             out: true,
-            overriddenNumber: 0,
+            overriddenNumber: 2,
             theme: {},
         })
     })
@@ -42,8 +42,11 @@ describe('buildPropsFromAttrs', () => {
         const props2 = () => ({
             number: 2,
         })
-         buildPropsFromAttrs(outProps, [prop1, props2])
+        const props = buildPropsFromAttrs(outProps, [prop1, props2])
 
-        expect(outProps).toStrictEqual(excpectedProps)
+        expect(props).toStrictEqual({
+            number: 2,
+            theme: {},
+        })
     })
 })

src/__tests__/css.test.tsx

@@ -159,7 +159,7 @@ describe('styled props', () => {
             [ 'textAlign', '1' ],
             [ 'textAlign', '1' ],
             [ 'color', '1' ],
-            [ 'background', '1' ],
+            [ 'backgroundColor', '1' ],
             [ 'backgroundColor', '1' ],
             [ 'backgroundColor', '1' ],
             [ 'borderColor', '1' ],
@@ -243,7 +243,9 @@ describe('styled props', () => {
             font-family: 'RobotoMono-Regular';
             ${css`
                 height: 1px;
-            `}
+            `};
+            background: green;
+            background: 'yellow';
         `
 
         expect(styled.styles).toStrictEqual([
@@ -254,7 +256,9 @@ describe('styled props', () => {
             ['fontFamily', 'Inter-Bold' ],
             ['fontFamily', 'RobotoMono-Regular'],
             ['fontFamily', 'RobotoMono-Regular'],
-            ['MIXIN_', new Css([['height', 1]])]
+            ['MIXIN_', new Css([['height', 1]])],
+            ['backgroundColor', 'green'],
+            ['backgroundColor', 'yellow'],
         ])
     })
 })

src/buildPropsFromAttrs.ts

@@ -12,13 +12,12 @@ import { AnyTheme, BaseObject, InnerAttrs, Themed, UnknownProps } from './types'
  *  { number: 1, overriddenNumber: 1}, // props as an object
  *  (props) => { number: props.number + 1, overriddenNumber: props.overriddenNumber + 1 } // props a function
  * ]
- * result - { overriddenNumber: 0, number: 2 }
+ * result - { overriddenNumber: 2, number: 2 }
  */
 export function buildPropsFromAttrs<Theme extends BaseObject = AnyTheme>(props: Themed<UnknownProps, Theme>, attrs: InnerAttrs[]): Themed<UnknownProps, Theme> {
     if (attrs.length === 0) {
       return props
     }
-    attrs = attrs.concat(props)
     return attrs.reduce<Themed<UnknownProps, Theme>>((acc, recordOrFn) => {
       return Object.assign(acc, getResult(acc, recordOrFn))
     }, { ...props })