Zero-runtime CSS in JS library

  • By Callstack
  • Last update: Dec 1, 2022
  • Comments: 17

Linaria

Zero-runtime CSS in JS library.


Build Status Code Coverage Version MIT License

All Contributors PRs Welcome Chat Code of Conduct Greenkeeper Sponsored by Callstack

tweet

Features

  • Write CSS in JS, but with zero runtime, CSS is extracted to CSS files during build
  • Familiar CSS syntax with Sass like nesting
  • Use dynamic prop based styles with the React bindings, uses CSS variables behind the scenes
  • Easily find where the style was defined with CSS sourcemaps
  • Lint your CSS in JS with stylelint
  • Use JavaScript for logic, no CSS preprocessor needed
  • Optionally use any CSS preprocessor such as Sass or PostCSS

Why use Linaria

Installation

npm install @linaria/core @linaria/react @linaria/babel-preset @linaria/shaker

or

yarn add @linaria/core @linaria/react @linaria/babel-preset @linaria/shaker

Setup

Linaria currently supports webpack and Rollup to extract the CSS at build time. To configure your bundler, check the following guides:

Or configure Linaria with one of the following integrations:

Optionally, add the @linaria preset to your Babel configuration at the end of the presets list to avoid errors when importing the components in your server code or tests:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@linaria"
  ]
}

See Configuration to customize how Linaria processes your files.

Syntax

Linaria can be used with any framework, with additional helpers for React. The basic syntax looks like this:

import { css } from '@linaria/core';
import { modularScale, hiDPI } from 'polished';
import fonts from './fonts';

// Write your styles in `css` tag
const header = css`
  text-transform: uppercase;
  font-family: ${fonts.heading};
  font-size: ${modularScale(2)};

  ${hiDPI(1.5)} {
    font-size: ${modularScale(2.5)};
  }
`;

// Then use it as a class name
<h1 className={header}>Hello world</h1>;

You can use imported variables and functions for logic inside the CSS code. They will be evaluated at build time.

If you're using React, you can use the styled helper, which makes it easy to write React components with dynamic styles with a styled-component like syntax:

import { styled } from '@linaria/react';
import { families, sizes } from './fonts';

// Write your styles in `styled` tag
const Title = styled.h1`
  font-family: ${families.serif};
`;

const Container = styled.div`
  font-size: ${sizes.medium}px;
  color: ${props => props.color};
  border: 1px solid red;

  &:hover {
    border-color: blue;
  }

  ${Title} {
    margin-bottom: 24px;
  }
`;

// Then use the resulting component
<Container color="#333">
  <Title>Hello world</Title>
</Container>;

Dynamic styles will be applied using CSS custom properties (aka CSS variables) and don't require any runtime.

See Basics for a detailed information about the syntax.

Demo

Edit Linaria Demo

Documentation

Contributing

We appreciate any support in library development!

Take a look on Contributing docs to check how you can run Linaria in development mode.

Trade-offs

  • No IE11 support when using dynamic styles in components with styled, since it uses CSS custom properties

  • Dynamic styles are not supported with css tag. See Dynamic styles with css tag for alternative approaches.

  • Modules used in the CSS rules cannot have side-effects. For example:

    import { css } from '@linaria/core';
    import colors from './colors';
    
    const title = css`
      color: ${colors.text};
    `;

    Here, there should be no side-effects in the colors.js file, or any file it imports. We recommend to move helpers and shared configuration to files without any side-effects.

Interoperability with other CSS-in-JS libraries

Linaria can work together with other CSS-in-JS libraries out-of-the-box. However, if you want to use styled components from Linaria as selectors in styled-components/emotion, you need to use @linaria/interop

Editor Plugins

VSCode

Atom

Webstorm

Sublime Text

Recommended Libraries

Inspiration

Acknowledgements

This project wouldn't have been possible without the following libraries or the people behind them.

Special thanks to @kentcdodds for his babel plugin and @threepointone for his suggestions and encouragement.

Made with ❤️ at Callstack

Linaria is an open source project and will always remain free to use. If you think it's cool, please star it 🌟 . Callstack is a group of React and React Native geeks, contact us at [email protected] if you need any help with these or just want to say hi!

Like the project? ⚛️ Join the team who does amazing stuff for clients and drives React Native Open Source! 🔥

Contributors

Thanks goes to these wonderful people (emoji key):

Paweł Trysła
Paweł Trysła

💻 📖 🤔
Satyajit Sahoo
Satyajit Sahoo

💻 📖 🤔
Michał Pierzchała
Michał Pierzchała

💻 📖 🤔
Lucas
Lucas

📖
Alexey Pronevich
Alexey Pronevich

📖
Wojtek Szafraniec
Wojtek Szafraniec

💻
Tushar Sonawane
Tushar Sonawane

📖 💡
Ferran Negre
Ferran Negre

📖
Jakub Beneš
Jakub Beneš

💻 📖
Oscar Busk
Oscar Busk

🐛 💻
Dawid
Dawid

💻 📖
Kacper Wiszczuk
Kacper Wiszczuk

💻 📖
Denis Rul
Denis Rul

💻
Johan Holmerin
Johan Holmerin

💻 📖
Gilad Peleg
Gilad Peleg

📖
Giuseppe
Giuseppe

💻
Matija Marohnić
Matija Marohnić

💻 📖
Stefan Schult
Stefan Schult

💻
Ward Peeters
Ward Peeters

💻
radoslaw-medryk
radoslaw-medryk

💻
杨兴洲
杨兴洲

💻
Dawid Karabin
Dawid Karabin

📖
Anton Evzhakov
Anton Evzhakov

💻
Chris Abrams
Chris Abrams

💻 📖 🤔
Jayphen
Jayphen

💻
c4605
c4605

💻
Toru Kobayashi
Toru Kobayashi

💻

This project follows the all-contributors specification. Contributions of any kind welcome!

Github

https://github.com/callstack/linaria

Comments(17)

  • 1

    new styles extractor

    Summary

    This is a PoC of more advanced styles extractor. It can evaluate almost any js code whereas current extractor has problems with code like this:

    const object = { fontSize: 12 };
    object.fontWeight = 'bold';
    export default styled.h1`
      ${object};
    `;
    

    Unlike current implementation, this extractor does not evaluate expressions immediately in TaggedTemplateExpression visitor but collects them for later evaluation. Then it builds a dependency graph for all expressions and strips all unrelated code from a module. On the last stage, it does a batch evaluation of all expressions.

    I've created this PR in WIP stage because I had a bit painful merge after 1.3.1 release and I also found your typescript branch :) So if you like it I will do some refactoring and rewrite to TS.

    Test plan

    New tests were added, old tests still work except one test with invalid code and two tests that check dependency extraction during evaluation.

  • 2

    Add an option to output atomic css

    Do you want to request a feature or report a bug? Feature

    What is the current behavior?

    If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test.

    What is the expected behavior? The current behavior is

    // Input 
    
    const header = css`
      text-transform: uppercase;
      font-family: ${fonts.heading};
      font-size: ${modularScale(2)};
    `;
    
    // Current Output
    const header = 'header_t1ugh8t9';
    
    // Expected Output
    const header = 'tt_swer3 ff_Sers34 fs_5tsdf';
    /*
    tt_swer3  -> text-transform
    ff_Sers34 -> font-family
    fs_5tsdf -> font-size
    */
    

    Please provide your exact Babel configuration and mention your Linaria, Node, Yarn/npm version and operating system.

  • 3

    Update website and readme with logo

    We need it, sooner or later. Already asked my designer-brother (@pierzchala) to work on it in his free time (may be in couple of weeks).

    The logo should resemble concepts like flower, CSS, JS.

  • 4

    Styling custom components with NextJs

    I'm using NextJs with linaria and trying to apply styled on custom component:

    function CoolComponent({ className, style }) {
      return (
        <div className={className} style={style}>My Component</div>
      );
    }
    
    const StyledCoolComponent = styled(CoolComponent)`
      background-color: red;
    `;
    

    and get error:

    import React from "react";
           ^^^^^
    
    SyntaxError: Unexpected identifier
    
  • 5

    Not compatible with Webpack file and url loaders?

    Do you want to request a feature or report a bug? Bug.

    What is the current behavior? Webpack’s file-loader or url-loader (they come standard with create-react-app) let you require() (or import) any file type (like images and fonts). At build time, the require statement gets replaced with a URL that you can use to load the file at runtime. Unfortunately Linaria seems to break any time I reference anything that gets loaded this way. It appears to attempt to load the file as if it were a JS module. E.g. both of these fail:

    css`background-image: url(`require('image.svg')`);`
    css`@font-face { font-family: Test; src: url(${require('webfont.woff')})}`;
    

    If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test. Quick create-react-app that attempts to load an SVG and a web font on the home page: https://github.com/steadicat/linaria-test

    What is the expected behavior? Expected behavior is for Linaria to let the loader run first so that those requires become plains strings to be included in the CSS.

    Please provide your exact Babel configuration and mention your Linaria, Node, Yarn/npm version and operating system. See app above.

  • 6

    Rollup: Using the "styled" tag in runtime is not supported

    Environment

    rollup: ^1.2.2 linaria: ^1.3.1

    Description

    Project is TypeScript + Linaria transpiled via Babel using @babel/preset-typescript. The module bundler I am using is rollup. Despite having included the linaria/babel preset in my babel.config.js file I am still seeing an error in the console: Error: Using the "styled" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly.

    Reproducible Demo

    /**
     * babel.config.js
     */
    
    module.exports = {
      presets: [
        '@babel/preset-env',
        '@babel/preset-typescript',
        '@babel/preset-react',
        'linaria/babel',
      ],
    };
    
    /**
     * rollup.config.js
     */
    
    import commonjs from 'rollup-plugin-commonjs';
    import resolve from 'rollup-plugin-node-resolve';
    import babel from 'rollup-plugin-babel';
    import linaria from 'linaria/rollup';
    import css from 'rollup-plugin-css-only';
    import pkg from './package.json';
    
    const extensions = ['.js', '.jsx', '.ts', '.tsx'];
    
    const name = 'RollupTypeScriptBabel';
    
    export default {
      input: './src/index.ts',
    
      external: ['react', 'react-dom'],
    
      plugins: [
        // Allows node_modules resolution
        resolve({ extensions }),
    
        // Allow bundling cjs modules. Rollup doesn't understand cjs
        commonjs({
          namedExports: {
            '../../node_modules/linaria/react.js': ['styled'],
            '../../node_modules/react-is/index.js': ['isElement', 'isValidElementType', 'ForwardRef'],
          },
        }),
    
        // Compile TypeScript/JavaScript files
        babel({ extensions, include: ['src/**/*'] }),
    
        linaria({
          sourceMap: process.env.NODE_ENV !== 'production',
          evaluate: true,
        }),
    
        css({
          output: 'styles.css',
        }),
      ],
    
      output: [
        {
          file: pkg.main,
          format: 'cjs',
        },
        {
          file: pkg.module,
          format: 'es',
        },
      ],
    };
    
    
    /**
     * BasicImageViewer.tsx
     */
    import { styled } from 'linaria/react';
    
    const BasicImageViewer = styled.img`
      width: 250px;
      height: 250px;
    `;
    
    export default BasicImageViewer;
    
  • 7

    [1.4.0-beta.0] A build error

    This problem was reported by @Guria (#495)

    Environment

    Description

    node_modules/react-scripts/node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js:1
    export default function _taggedTemplateLiteral(strings, raw) {
    ^^^^^^
    
    SyntaxError: Unexpected token 'export'
    

    Reproducible Demo

  • 8

    Error: Cannot find module 'core-js/modules/es6.regexp.to-string'

    I ran this example on my computer and I got this error:

    ERROR in ./src/App.js Module build failed (from ./node_modules/linaria/loader.js): Error: Cannot find module 'core-js/modules/es6.regexp.to-string' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:613:15) at Function.Module._load (internal/modules/cjs/loader.js:539:25) at Module.require (internal/modules/cjs/loader.js:667:17) at require (internal/modules/cjs/helpers.js:20:18) at Object.<anonymous> (/Users/egortrubnikov-panov/Downloads/linaria-demo 2/node_modules/linaria/lib/loader.js:3:1) at Module._compile (internal/modules/cjs/loader.js:738:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:749:10) at Module.load (internal/modules/cjs/loader.js:630:32) at tryModuleLoad (internal/modules/cjs/loader.js:570:12) at Function.Module._load (internal/modules/cjs/loader.js:562:3)

    how can I fix this?

  • 9

    [website] Replace ESLint with Prettier

    Do you want to request a feature or report a bug? Feature (Build tools)

    What is the current behavior? ESLint rules are so annoying and slow down the development.

    If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test. N/A

    What is the expected behavior? Prettier is the standard currently and so many popular projects use it and makes you write the code without being worried about one less semicolon or on which line close which tag :(

    Please provide your exact Babel configuration and mention your Linaria, Node, Yarn/npm version and operating system. Not related.

  • 10

    Fix dual packages ES module import bug

    Fixes #904 (and possibly #1043)

    Solution is based on this documentation: https://nodejs.org/api/packages.html#approach-1-use-an-es-module-wrapper

    It properly configures the package entry point for both CommonJS and ESM, which is currently not the case (see #904)

  • 11

    EvalError: Unexpected token 'export' in

    Environment

    • Linaria version: 4.1.0
    • Bundler (+ version): webpack 5.78
    • Node.js version: 16
    • OS: ubuntu

    Description

    ➤ YN0000: /home/circleci/project/node_modules/@linaria/babel-preset/lib/module.js:384
    ➤ YN0000:         throw new EvalError(`${e.message} in${callstack.join('\n| ')}\n`);
    ➤ YN0000:         ^
    ➤ YN0000: 
    ➤ YN0000: EvalError: Unexpected token 'export' in
    ➤ YN0000: | /home/circleci/project/node_modules/antd/es/index.js
    ➤ YN0000: | src/app/App.tsx
    ➤ YN0000: 
    ➤ YN0000:     at /home/circleci/project/node_modules/@linaria/babel-preset/lib/module.js:384:15
    ➤ YN0000:     at Array.forEach (<anonymous>)
    ➤ YN0000:     at Module.evaluate (/home/circleci/project/node_modules/@linaria/babel-preset/lib/module.js:361:10)
    ➤ YN0000:     at require.Object.assign.ensure (/home/circleci/project/node_modules/@linaria/babel-preset/lib/module.js:319:11)
    ➤ YN0000:     at src/app/App.tsx:1:46
    ➤ YN0000:     at src/app/App.tsx:2:3
    ➤ YN0000:     at Script.runInContext (node:vm:139:12)
    ➤ YN0000:     at /home/circleci/project/node_modules/@linaria/babel-preset/lib/module.js:368:16
    ➤ YN0000:     at Array.forEach (<anonymous>)
    ➤ YN0000:     at Module.evaluate (/home/circleci/project/node_modules/@linaria/babel-preset/lib/module.js:361:10)
    

    Seems related to babel doing a transform it shouldn't?

    Reproducible Demo

    https://github.com/ntucker/anansi/pull/1591

    1. git clone https://github.com/ntucker/anansi
    2. git checkout renovate/major-linaria
    3. yarn install
    4. yarn build:pkg
    5. cd examples/concurrent
    6. yarn build
  • 12

    webpack build silently fails after Linaria update

    Hi there,

    I have a mysterious problem in one of my projects after updating to the current version of Linaria: The webpack build seems to crash, but it does not report any error - it just exits without writing anythin on disk.

    I managed to track down the change in Linaria that causes the problem, I just can't figure out what's happening exactly. Thanks for having a look! 😅

    Environment

    • Linaria version: 4.2.2
    • Bundler (+ version): webpack 5.75.0
    • Node.js version: 19.1.0
    • OS: ArchLinux

    Description

    I do not really understand what is happening - maybe an error that leads to a crash, but the error is then swallowed somehow?

    I managed to track it down to https://github.com/callstack/linaria/pull/1086 (CC @Anber ): It starts working again when I pin @linaria/babel-preset to 4.2.2, or comment out the await mutex that was introduced there.

    Reproducible Demo

    I was unable to provide a minimal reproduction, as only one of my projects is affected, and I don't know which code there causes it.

    I created a branch with a reproduction here: https://github.com/kryops/vlight/tree/linaria-babel-preset-error

    Just execute yarn, which should build everything.

    The output is:

    ...
    [BABEL] Note: The code generator has deoptimised the styling of /home/michael/git/vlight/node_modules/@mdi/js/mdi.js as it exceeds the max of 500KB.
    [BABEL] Note: The code generator has deoptimised the styling of /home/michael/git/vlight/node_modules/@mdi/js/mdi.js as it exceeds the max of 500KB.
    ➤ YN0000: Done with warnings in 42s 859ms
    

    (the [BABEL] message is repeated 4 times)

    Nothing is written into the frontend/dist folder.

    The successful build output on the main branch looks like this:

    ...
    [BABEL] Note: The code generator has deoptimised the styling of /home/michael/git/vlight/node_modules/@mdi/js/mdi.js as it exceeds the max of 500KB.
    [BABEL] Note: The code generator has deoptimised the styling of /home/michael/git/vlight/node_modules/@mdi/js/mdi.js as it exceeds the max of 500KB.
    6 assets
    774 modules
    webpack 5.75.0 compiled successfully in 33886 ms
    ➤ YN0000: Done with warnings in 54s 906ms
    

    (the [BABEL] message is repeated more than 4 times)

  • 13

    EvalError: (0 , _solidJs.createContext) is not a function

    I get the bug when I use linaria with solid-js.

    EvalError: (0 , _solidJs.createContext) is not a function in

    I think we need to to rule it out as at https://github.com/callstack/linaria/blob/master/packages/utils/src/isUnnecessaryReactCall.ts#L53

  • 14

    TypeScript 4.9 syntax `satisfies` doesn't appear to work

    Environment

    • Linaria version: @linaria/core v4.2.2 @linaria/esbuild v4.2.2
    • Bundler (+ version): esbuild 0.15.15
    • Node.js version: v19.1.0
    • OS: macOS 13.0.1

    Description

    The Linaria plugin fails with the following error on a line of code with the syntax const something = { … } satisfies MyType:

     ✘ [ERROR] [plugin linaria] Transform failed with 1 error:
     …/src/app/fresco/src/components/Theme.styles.ts:13:85: error: Expected ";" but found "satisfies"
    
         ../fresco/src/components/FrescoSettings.tsx:2:7:
           2 │ import "../components/Theme.styles";
             ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    
       This error came from the "onLoad" callback registered here:
    
         ../../../node_modules/@linaria/esbuild/dist/index.js:71:12:
           71 │       build.onLoad({ filter: /\.(js|jsx|ts|tsx)$/ }, async (args) ...
              ╵             ~~~~~~
    
         at setup (…/node_modules/@linaria/esbuild/dist/index.js:71:13)
         at handlePlugins (…/node_modules/esbuild/lib/main.js:1251:21)
         at buildOrServeImpl (…/node_modules/esbuild/lib/main.js:942:5)
         at Object.buildOrServe (…/node_modules/esbuild/lib/main.js:750:5)
         at …/node_modules/esbuild/lib/main.js:2087:17
         at new Promise (<anonymous>)
         at Object.build (…/node_modules/esbuild/lib/main.js:2086:14)
         at build (…/node_modules/esbuild/lib/main.js:1933:51)
         at buildApp (…/src/app/vekter/esbuild/vekter.esbuild.js:165:12)
    

    Reproducible Demo

    import { css } from "@linaria/core"
    
    interface ColorTokenMap {
        primary: string
        secondary: string
    }
    
    const lightTokens = {
        primary: "#111",
        secondary: "#09f",
    } satisfies ColorTokenMap
    
    export const text = css`
        color: ${lightTokens.primary};
    `
    
  • 15

    update patch version of linting packages to npm will pick up change

    Motivation

    https://www.npmjs.com/package/@linaria/postcss-linaria doesn't show a readme despite being added in https://github.com/callstack/linaria/pull/1107

    Summary

    According to the npmjs.com docs, the package has to be bumped in order for the readme to get updated.

    Test plan

    N/A

  • 16

    chore: introduce linaria-scripts (SWC)

    Motivation

    Upgrading linaria to use modern tooling. This is what you should pay attention for while reviewing this PR: https://github.com/callstack/linaria/pull/1131/files#diff-df46b0b81d593e59747fa15f319c82ed21bb76d5c6a7c91ce670a027904bcdd0

    Summary

    Implmeneted custom build script based on SWC. Inspired by astro-scripts.. SWC builds ~10x faster than babel. However, most of build time is consumed by typescript compilier. I combined TSC and SWC compilier in one script to save time on unwatned spawning of new processes.

    Also, changed all output to /dist, (/dist/cjs, /dist/esm, /dist/types) because I believe it's more convinient way to manage output artifacts. TODO: I also suggest to change output file extensions: .mjs for esm and .cjs for cjs output. I think it's generally good practice.

    Almost all tests are passing, however, related to processing expression from imported dependencies are failing, because @linaria/shaker can't understand export syntax of some files (especially @linaria/utils/index.js). Compare Babel exports:

    "use strict";
    Object.defineProperty(exports, "__esModule", {
      value: true
    });
    var _exportNames = {
      asyncResolveFallback: true,
      syncResolve: true,
      collectExportsAndImports: true,
      findIdentifiers: true,
      nonType: true,
      getFileIdx: true,
      isExports: true,
      isNotNull: true,
      isRemoved: true,
      isRequire: true,
      isTypedNode: true,
      isUnnecessaryReactCall: true,
      slugify: true,
      JSXElementsRemover: true
    };
    Object.defineProperty(exports, "JSXElementsRemover", {
      enumerable: true,
      get: function () {
        return _JSXElementsRemover.default;
      }
    });
    // ....
    

    and SWC exports:

    "use strict";
    Object.defineProperty(exports, "__esModule", {
        value: true
    });
    function _export(target, all) {
        for(var name in all)Object.defineProperty(target, name, {
            enumerable: true,
            get: all[name]
        });
    }
    _export(exports, {
        asyncResolveFallback: ()=>_asyncResolveFallback.default,
        syncResolve: ()=>_asyncResolveFallback.syncResolve,
        collectExportsAndImports: ()=>_collectExportsAndImports.default,
        findIdentifiers: ()=>_findIdentifiers.default,
        nonType: ()=>_findIdentifiers.nonType,
        getFileIdx: ()=>_getFileIdx.default,
        isExports: ()=>_isExports.default,
        isNotNull: ()=>_isNotNull.default,
        isRemoved: ()=>_isRemoved.default,
        isRequire: ()=>_isRequire.default,
        isTypedNode: ()=>_isTypedNode.default,
        isUnnecessaryReactCall: ()=>_isUnnecessaryReactCall.default,
        slugify: ()=>_slugify.default,
        JSXElementsRemover: ()=>_jsxelementsRemover.default
    });
    

    I identified out cause of fail. File processed by babel and loaded by import-exports collector:

    linaria:shaker:00003 [start] /home/foxpro/Desktop/oss/linaria/packages/utils/dist/cjs/index.js, onlyExports: slugify
    linaria:shaker:00003 [import-and-exports] imports: 17 (side-effects: 0), exports: 17, reexports: 0
    linaria:shaker:00003 [end] remaining imports: Map(1) { './slugify' => [ 'default' ] }ss
    

    Same file processed by SWC:

    2022-11-23T10:40:21.116Z linaria:shaker:00003 [start] /home/foxpro/Desktop/oss/linaria/packages/utils/dist/cjs/index.js, onlyExports: slugify
    2022-11-23T10:40:21.121Z linaria:shaker:00003 [import-and-exports] imports: 13 (side-effects: 0), exports: 0, reexports: 0
    2022-11-23T10:40:21.128Z linaria:shaker:00003 [end] remaining imports: Map(11) {
      './asyncResolveFallback' => [ 'default', 'syncResolve' ],
      './findIdentifiers' => [ 'default', 'nonType' ],
      './getFileIdx' => [ 'default' ],
      './isExports' => [ 'default' ],
      './isNotNull' => [ 'default' ],
      './isRemoved' => [ 'default' ],
      './isRequire' => [ 'default' ],
      './isTypedNode' => [ 'default' ],
      './isUnnecessaryReactCall' => [ 'default' ],
      './slugify' => [ 'default' ],
      './visitors/JSXElementsRemover' => [ 'default' ]
    }
    

    Test plan

    Write test for different bundlers I suppose?... Or change library architecture.

    This depends on: https://github.com/callstack/linaria/pull/1128

  • 17

    JSX css="" syntax.

    Describe the enhancement

    I would like to write code like this:

    <section
       css='
          color: red;
          font-size: medium;
          margin: 12px;
          box-sizing: border-box;
       '
    />
    

    instead of:

    <div
       class={css`
          color: red;
          font-size: medium;
          margin: 12px;
          box-sizing: border-box;
       `}
    />
    

    Motivation

    This will improve DX.

    Possible implementations

    Dunno