A familiar and performant compile time CSS-in-JS library for React.

Last update: Aug 8, 2022

Compiled

A familiar and performant compile time CSS-in-JS library for React.

Apache 2.0 @compiled/react PRs welcome

Get started now ➚

Usage

import { styled, ClassNames } from '@compiled/react';

// Tie styles to an element
<div css={{ color: 'purple' }} />

// Create a component that ties styles to an element
const StyledButton = styled.button`
  color: ${(props) => props.color};
`;

// Use a component where styles are not necessarily tied to an element
<ClassNames>
  {({ css }) => children({ className: css({ fontSize: 12 }) })}
</ClassNames>

Extract styles

Turn on extraction and all components styled in your app and sourced through NPM will have their runtime stripped and styles extracted to an atomic style sheet.

-import { CC, CS } from '@compiled/react/runtime';
-
-const _2 = '._syaz1q9v{color: hotpink}';
-const _ = '._1wybfyhu{font-size: 48px}';
-
export const LargeHotPinkText = () => (
-  <CC>
-   <CS>{[_, _2]}</CS>
    <span className="_syaz1q9v _1wybfyhu">Hello world</span>
-  </CC>
);
._1wybfyhu {
  font-size: 48px;
}
._syaz1q9v {
  color: hotpink;
}

See CSS extraction for more information.

Installation

Install the React package.

npm install @compiled/react

Then configure your bundler of choice or use Babel directly.

Webpack

Install the Webpack loader.

npm install @compiled/webpack-loader --save-dev

See installation for more information.

Parcel

Note
Parcel v2 is currently in pre-release which makes this transformer experimental, it may break when updating Parcel. Use with caution.

Install the Parcel v2 transformer.

npm install @compiled/parcel-transformer --save-dev

See installation for more information.

Babel

Install the Babel plugin.

npm install @compiled/babel-plugin --save-dev

See installation for more information.

Contributions

Contributions are welcomed! Please see CONTRIBUTING.md to get started.

Atlassian

GitHub

https://github.com/atlassian-labs/compiled
Comments
  • 1. Webpack CSS extraction discussion

    I really like the idea of compiled as you move as much css processing to the build step and shrink the runtime code to almost 0.

    Only by a coincidence I noticed that you are trying to build a webpack plugin and would love to jump in..

    My knowledge of compiled is quite limited so maybe my solution could be over simplified and might not cover all your requirements.
    But so far the first POC is working with the following features:

    • Entry Based Chunk Splitting (e.g. main.css and about-us.css)
    • Lazy Chunk Splitting (e.g. load styles for a modal only once the modal opens)
    • HMR

    It works together with the following third party packages from the webpack ecosystem:

    • MiniCssExtractPlugin (optional)
    • HtmlWebpackPlugin (optional)
    • PostCssLoader (optional)
    • StyleLoader (optional)
    • CssLoader

    For the atomic loader flow I stole an idea from Tobias Koppers (the author of webpack)...
    In case this idea works out a lot of credits go to him :)

    πŸ‘‰ Webpack Config Demos (click to expand)

    Webpack config (dev):

    const HtmlWebpackPlugin = require("html-webpack-plugin");
    
    module.exports = {
      devtool: false,
      mode: 'development',
      module: {
        rules: [
          
          {
            test: /\.js$/i,
            use: '@compiled/loader',
            exclude: /node_modules/
          },
    
          {
            test: /\.css$/i,
            use: ["style-loader", "css-loader"],
          },
    
        ],
      },
      plugins: [ new HtmlWebpackPlugin() ]
    }
    

    Webpack config (prod):

    const HtmlWebpackPlugin = require("html-webpack-plugin");
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    
    module.exports = {
      mode: 'production',
      module: {
        rules: [
          
          {
            test: /\.js$/i,
            use: '@compiled/loader',
            exclude: /node_modules/
          },
    
          {
            test: /\.css$/i,
            use: [MiniCssExtractPlugin.loader, 'css-loader'],
          },
        ],
      },
      plugins: [new MiniCssExtractPlugin(), new HtmlWebpackPlugin()],
    };
    
    πŸ‘‰ the POC of @compiled/loader (click to expand)

    I created a very very naive and simplified loader (~80 LOC) which is only able to extract from a styled components:

    
    export const Button = styled.button`
      border: none;
      border-radius: 3px;
      padding: 8px 10px;
      background-color: #6554c0;
      color: #fff;
      font-weight: 400;
      font-family: inherit;
      font-size: 14px;
    `
    

    The compiled result:

    Preview of the Button

    The demo is also lazy loading a second component:

    // After 2s load the header
    setTimeout(() => {
      import('./Header');
    }, 2000);
    

    The code for the header is also using the styled API:

    export const Header = styled.header`
      border: none;
      background: purple;
      color: #fff;
    `
    

    As you can see Header shares 2 atomic styles with Button.
    Webpack will notices that and will create a second CSS file which will contain only the purple background color.

    πŸ‘‰ run the POC locally (click to expand)

    download the demo (zip)

    Run (dev server):

    npm i
    npm start
    

    Build:

    npm i
    npm start
    

    Although it is only a first draft I would love to know your feedback :)

    If you need any help to understand how exactly this draft works we could probably save some time with a screen sharing session - just ping me on twitter @jantimon - my DM is always open

    Reviewed by jantimon at 2021-02-22 17:15
  • 2. Next.js integration example

    Is your feature request related to a problem? Please describe. I would like to include Compiled in my CSS-in-TS analysis.

    Describe the solution you'd like A working example with Next.js will greatly help.

    Describe alternatives you've considered I've searched for articles or any example, but couldn't find any.
    I've also searched the Next.js examples folder.

    Reviewed by andreipfeiffer at 2021-03-02 21:32
  • 3. Atomic post css plugin

    Look at tests for example input and outputs.

    Closes #286

    TODO

    • [x] top level property inside an at rule
    • [x] properties in nested selectors in an at rule
    • [x] top level property
    • [x] properties in nested selectors
    • [x] should callback with all created class names to be used later on
    • [x] ensure if any property that needs prefixing has it in the atomic declaration
    • [x] nested at rules
    • [x] nested at rules with nested selectors
    • [x] multi selector support (div, span { display: block })
    • [x] fix nested at rules autoprefixing blowing up

    TODO FOLLOW UP PR

    • [ ] reduce duplicate declarations #303
    Reviewed by madou at 2020-09-22 01:25
  • 4. getting an error when import { css } from '@compiled/react

    SyntaxError: /app/src/pages/Compiled.tsx: CallExpression isn't a supported CSS type - try using an object or string. (This is an error on an internal node. Probably an internal
    error. Location has been estimated.)
      4 | import { css } from '@compiled/react';
      5 |
    > 6 | const buttonCss = css`
        |                   ^^^
      7 |   border: 1px solid blue;
      8 |   border-radius: 3px;
      9 |   font-size: 10px;
        at File.buildCodeFrameError (/app/node_modules/@babel/core/lib/transformation/file/file.js:240:12)
        at NodePath.buildCodeFrameError (/app/node_modules/@babel/traverse/lib/path/index.js:138:21)
        at Object.buildCodeFrameError (/app/node_modules/@compiled/babel-plugin/src/utils/ast.tsx:77:42)
        at Object.buildCss (/app/node_modules/@compiled/babel-plugin/src/utils/css-builders.tsx:434:9)
        at Object.buildCss (/app/node_modules/@compiled/babel-plugin/src/utils/css-builders.tsx:360:20)
        at Object.visitCssPropPath (/app/node_modules/@compiled/babel-plugin/src/css-prop/index.tsx:42:21)
        at PluginPass.JSXOpeningElement (/app/node_modules/@compiled/babel-plugin/src/babel-plugin.tsx:216:9)
        at newFn (/app/node_modules/@babel/core/node_modules/@babel/traverse/lib/visitors.js:175:21)
        at NodePath._call (/app/node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:55:20)
        at NodePath.call (/app/node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:42:17)
        at NodePath.visit (/app/node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:92:31)
        at TraversalContext.visitQueue (/app/node_modules/@babel/core/node_modules/@babel/traverse/lib/context.js:116:16)
        at TraversalContext.visitSingle (/app/node_modules/@babel/core/node_modules/@babel/traverse/lib/context.js:85:19)
        at TraversalContext.visit (/app/node_modules/@babel/core/node_modules/@babel/traverse/lib/context.js:144:19)
        at Function.traverse.node (/app/node_modules/@babel/core/node_modules/@babel/traverse/lib/index.js:82:17)
        at NodePath.visit (/app/node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:99:18)
     @ ./.cache/_this_is_virtual_fs_path_/$virtual/async-requires.js 16:11-18:5
     @ ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70
    

    code :

    import * as React from "react";
    import { Layout } from "src/components/Layout";
    import { css } from '@compiled/react';
    
    const buttonCss = css`
      border: 1px solid blue;
      border-radius: 3px;
      font-size: 10px;
      font-weight: 500;
      @media screen and (min-width: 300px) {
        border: 1px solid red;
      }
    `;
    
    const Compiled = (props:any) => {
      return (
        <Layout >
          <div css={buttonCss}>Hello</div>
        </Layout>
      )
    }
    
    export default Compiled
    
    

    versons

        "@compiled/babel-plugin": "^0.6.13",
        "@compiled/css-in-js": "^0.4.7",
        "@compiled/react": "^0.6.10",
    
    Reviewed by cameronbraid at 2021-04-14 03:58
  • 5. [email protected] license issue

    Latest version of Switcher has @atlaskit/lozenge bumped to 10.1.0 - this pulls in @compiled/react which itself pulls in [email protected]. The problem with this is the license for that library is incompatible (MPL-2.0) and its breaking Confluence FE pipeline.

    @madou: If you are around. Do take a look at this. I am investigating how [email protected] end up in the deps.

    Reviewed by pgmanutd at 2021-01-08 04:02
  • 6. Fix transformer blowing up when transforming imported variables

    See: https://github.com/madou/untitled-css-in-js-project/pull/22

    It's blowing up when iterating through the JSX attributes (className doesn't have a parent = blows up).

    Need to understand why - if it's a bug - and if we can work around it. It works fine in tests - blows up when running storybook/webpack/ts-loader though.


    Found this https://github.com/longlho/ts-transform-css-modules - should be good reference.

    Edit: Or not because it follows css files not typescript. Meh.

    Reviewed by madou at 2019-12-21 09:17
  • 7. fix: style duplication issue #388

    To solve the issue I have added a script tag as a sibling to the style tag when SSR'd. The script tag contains the stringifyed inserted cache data and is added to the client cache object when the bundle is executed.

    This solution does have a few downsides:

    1. Adding an extra DOM node next to the style tag with the inserted classnames cache effectively doubles the DOM nodes needed to operate.
    2. When the size of the application grows and there are a large number of SSR'd components there is potential that the parsing of both the style and script tags will block execution long enough to be noticeable. It might be prudent to add a batching function. e.g. raf or settimeout.
    Reviewed by MatthewCharlton at 2021-03-17 04:19
  • 8. [SPIKE] Atomic baked in styles

    This is a spike which refactors the internals to start as atomic declarations. It's rough - and we'll probably throw it away and re-write it afterwards. For now we're just using it to gather data. #272

    It does work though!

    Before (overrides cancelled):

    image

    After (overrides persisted):

    image

    Observations

    • Bundle size gets bigger
    • Gzip keeps bundle size in a reasonable state
    • Atomic declarations naturally solve the overriding problem

    Todo

    • [x] Create a complex example
    • [x] Get bundle size (mingzip) before
    • [x] Get bundle size (mingzip) after
    • [x] Investigate alternate hashing solutions
    • [x] Investigate ensuring atomic styles within a single module
    • [x] Ordering of the runtime stylesheet to ensure pseduo selector order
    Reviewed by madou at 2020-09-09 06:14
  • 9. Support for twin.macro

    Hey there,

    I keen on getting my package twin.macro working with compiled-css-in-js. Twin converts tailwind classes to css objects with a babel macro and then allows css props and styled imports (from libraries like yours) to take care of the rest.

    Right now I'm hitting issues when I introduce the tw block within the styled import and css prop.

    Here's the error I'm seeing:

    @compiled/css-in-js => unsupported node
    

    I've tried switching the orders of imports and babel plugin registrations but no dice.

    Here's the code I've been testing and I've also made a code sandbox:

    import React from 'react'
    import { styled } from '@compiled/css-in-js'
    import tw from 'twin.macro'
    
    const Button = styled.button`
      ${tw`p-10`}
    `
    
    const App = () => (
      <div
        css={`
          ${tw`text-red-500`}
        `}
      >
        <Button>Test</Button>
      </div>
    )
    
    export default App
    

    Twin's output would normally look something like this before the css-in-js library does its thing:

    // ...
    
    const Button = styled.button`
      ${{
        "padding": "2.5rem"
      }}
    `
    
    const App = () => (
      <div
        css={`
          ${{
              "--text-opacity": "1",
                "color": "rgba(245, 101, 101, var(--text-opacity))"
              }}
        `}
      >
        <Button>Test</Button>
      </div>
    )
    
    // ...
    

    It would be sweet if we could get the two packages co-operating, would you be able to check out how much work would be required your side?

    Reviewed by ben-rogerson at 2020-06-20 11:32
  • 10. Add support for GatsbyJS

    As GatsbyJS doesn't give you direct access to a .babelrc file, we'd need a gatsbyjs plugin to support using @compiled/babel-plugin-css-in-js.

    Here's an example of how the official Emotion plugin for Gatsby works: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-emotion

    Reviewed by rozenmd at 2020-04-30 07:19
  • 11. RFC: Theming

    Fresh eyes needed. We should also take inspiration from https://theme-ui.com/

    We can even create a TS language service to tell us what themes are available with intellisense!

    Global theming

    Define your tokens in your options:

    {
      base: {},
      default: {},
      [optionalotherthemes]: {} // every other theme needs to have the same keys from default
    }
    

    Then use them in your CSS sourced from default:

    css`
      color: primary; // or
      color: theme(primary);
    `
    

    Transforms to:

    color: #fff;
    color: var(--var-123abc);
    

    Hardcodes and use the variable so it works with/without a parent theme.

    Prepare a theme provider for consumers (you should only ever create one of these):

    import { createThemeProvider } from '@compiled/css-in-js';
    
    export const ThemeProvider = createThemeProvider();
    
    // Optional "runtime" themes.
    export const ThemeProvider = createThemeProvider({ ... });
    

    Transforms to:

    import { _TP } from '@compiled/css-in-js';
    
    const theme = { base: { ... }, default: { '--var-abc123': '#000', ... }, ... };
    // optional runtime themes would be merged in and converted to css variables
    
    export const ThemeProvider = (props) => (
      <_TP theme={props.theme}>
       {props.children(theme[props.mode])
      <_TP>
    );
    

    And then your consumers use like:

    import { ThemeProvider } from 'your-design-system';
    
    const App = () => (
      <ThemeProvider theme="dark">
         {style => <div style={style}>...</div>
      </ThemeProvider>
    );
    

    Component theming

    Would be the same as above with one key difference - the theme isn't sourced from the config. It's sourced inline.

    import { createVariants } from '@compiled/css-in-js';
    
    const useVariants = createVariants<'primary' | 'danger'>({
      default: { default: {}, [optionalotherthemes]: {} },
      [optionalotherthemes]: {},
    });
    
    <button style={useVariants('primary')} css={{ border: 'border', color: 'color' }}>
      blah
    </button>
    
    import { useMode } from '@compiled/style;
    
    // transformed to css variables
    const variants = { default: {}, ... };
    
    const useVariants = (variant: string) => {
      const mode = useMode();
      const defaultVariant = variants.default;
    
      return { 
        ...defaultVariant.default,
        ...defaultVariant[mode],
        ...variants[variant][mode],
      };
    };
    

    The type safety aspect is missing a little. Perhaps instead of using string literals theme(primary) and variant(color) we could import them?

    import { themeRefs, createVariants } from '@compiled/css-in-js'; 
    
    const { useVariants, variant } = createVariants({});
    const theme = themeRefs();
    
    <div
      style={useVariants('primary')}
      css={{
        backgroundColor: variant('backgroundColor'),
        color: theme('primary'),
      }}
    />
    

    ???

    Goals

    • Minimal use of react context
    • Css variables for passing style values around
    • Don't force specific markup to consumers
    • Ensure bleeding of css variables doesn't affect things it shouldn't

    Lingering thoughts

    • What about runtime themes (i.e. they aren't known until runtime)?
    Reviewed by madou at 2019-12-19 03:44
  • 12. chore(deps): update postcss packages

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | autoprefixer | ^10.4.7 -> ^10.4.8 | age | adoption | passing | confidence | | postcss (source) | ^8.4.14 -> ^8.4.16 | age | adoption | passing | confidence |


    Release Notes

    postcss/autoprefixer

    v10.4.8

    Compare Source

    • Do not print color-adjust warning if print-color-adjust also is in rule.
    postcss/postcss

    v8.4.16

    Compare Source

    • Fixed Root AST migration.

    v8.4.15

    Compare Source

    • Fixed AST normalization after using custom parser with old PostCSS AST.

    Configuration

    πŸ“… Schedule: Branch creation - "before 3am on Monday" (UTC), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled due to failing status checks.

    β™» Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    πŸ‘» Immortal: This PR will be recreated if closed unmerged. Get config help if that's undesired.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    Reviewed by renovate[bot] at 2022-08-01 02:01
  • 13. chore(deps): update eslint packages (major)

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @typescript-eslint/eslint-plugin | ^4.33.0 -> ^5.32.0 | age | adoption | passing | confidence | | @typescript-eslint/parser | ^4.33.0 -> ^5.32.0 | age | adoption | passing | confidence | | eslint (source) | ^7.32.0 -> ^8.21.0 | age | adoption | passing | confidence | | eslint-plugin-flowtype | ^6.1.1 -> ^8.0.3 | age | adoption | passing | confidence |


    Release Notes

    typescript-eslint/typescript-eslint (@​typescript-eslint/eslint-plugin)

    v5.32.0

    Compare Source

    Features
    • eslint-plugin: [no-use-before-define] add "allowNamedExports" option (#​5397) (ad412cd)

    v5.31.0

    Compare Source

    Bug Fixes
    • eslint-plugin: [typedef] Support nested array destructuring with type annotation (#​5311) (6d19efe)
    • scope-manager: handle typeParameters of TSInstantiationExpression (#​5355) (2595ccf)
    Features
    • eslint-plugin: [consistent-generic-ctors] check class field declaration (#​5288) (48f996e)
    • eslint-plugin: [prefer-nullish-coalescing] add ignoreTernaryTests option (#​4965) (f82727f)

    5.30.7 (2022-07-18)

    Bug Fixes

    5.30.6 (2022-07-11)

    Note: Version bump only for package @​typescript-eslint/eslint-plugin

    5.30.5 (2022-07-04)

    Bug Fixes
    • eslint-plugin: [consistent-indexed-object-style] fix record mode fixer for generics with a default value (#​5280) (57f032c)

    5.30.4 (2022-07-03)

    Note: Version bump only for package @​typescript-eslint/eslint-plugin

    5.30.3 (2022-07-01)

    Note: Version bump only for package @​typescript-eslint/eslint-plugin

    5.30.2 (2022-07-01)

    Note: Version bump only for package @​typescript-eslint/eslint-plugin

    5.30.1 (2022-07-01)

    Bug Fixes
    • eslint-plugin: [no-base-to-string] add missing apostrophe to message (#​5270) (d320174)

    v5.30.7

    Compare Source

    Bug Fixes

    v5.30.6

    Compare Source

    Note: Version bump only for package @​typescript-eslint/eslint-plugin

    v5.30.5

    Compare Source

    Bug Fixes
    • eslint-plugin: [consistent-indexed-object-style] fix record mode fixer for generics with a default value (#​5280) (57f032c)

    v5.30.4

    Compare Source

    Note: Version bump only for package @​typescript-eslint/eslint-plugin

    v5.30.3

    Compare Source

    Note: Version bump only for package @​typescript-eslint/eslint-plugin

    v5.30.2

    Compare Source

    Note: Version bump only for package @​typescript-eslint/eslint-plugin

    v5.30.1

    Compare Source

    Bug Fixes
    • eslint-plugin: [no-base-to-string] add missing apostrophe to message (#​5270) (d320174)

    v5.30.0

    Compare Source

    Features

    v5.29.0

    Compare Source

    Note: Version bump only for package @​typescript-eslint/eslint-plugin

    v5.28.0

    Compare Source

    Bug Fixes
    • [TS4.7] allow visiting of typeParameters in TSTypeQuery (#​5166) (dc1f930)
    • eslint-plugin: [space-infix-ops] support for optional property without type (#​5155) (1f25daf)
    Features

    5.27.1 (2022-06-06)

    Bug Fixes
    • eslint-plugin: [space-infix-ops] correct PropertyDefinition with typeAnnotation (#​5113) (d320174)
    • eslint-plugin: [space-infix-ops] regression fix for conditional types (#​5135) (e5238c8)
    • eslint-plugin: [space-infix-ops] regression fix for type aliases (#​5138) (4e13deb)

    v5.27.1

    Compare Source

    Bug Fixes
    • eslint-plugin: [space-infix-ops] correct PropertyDefinition with typeAnnotation (#​5113) (d320174)
    • eslint-plugin: [space-infix-ops] regression fix for conditional types (#​5135) (e5238c8)
    • eslint-plugin: [space-infix-ops] regression fix for type aliases (#​5138) (4e13deb)

    v5.27.0

    Compare Source

    Bug Fixes
    Features

    v5.26.0

    Compare Source

    Bug Fixes
    • eslint-plugin: [member-delimiter-style] autofixer result is not as expected when comments after the delimiter with option delimiter: 'none' (#​5029) (ed7b5f6)
    • eslint-plugin: [member-delimiter-style] autofixer result is not as expected with option delimiter: 'none' (#​5023) (9e97a11)
    • eslint-plugin: [prefer-readonly] correct issue with anonymus functions (#​4974) (952e2f0), closes #​2590

    v5.25.0

    Compare Source

    Bug Fixes
    Features

    v5.24.0

    Compare Source

    Bug Fixes
    Features

    v5.23.0

    Compare Source

    Bug Fixes
    • eslint-plugin: [no-restricted-imports] allow type import as long as there's one matching pattern (#​4898) (0419d28)
    • eslint-plugin: [no-unnecessary-type-constraint] change to suggestion fix, fix multiple trailing comma failures (#​4901) (4507ac8)

    v5.22.0

    Compare Source

    Bug Fixes
    Features

    v5.21.0

    Compare Source

    Bug Fixes
    • eslint-plugin: [no-misused-promises] prioritize false returns when checking whether a function returns only void (#​4841) (ccadb60)
    • eslint-plugin: [no-namespace] fix false positive for exported namespaces when allowDeclarations=true (#​4844) (4e7c9be)
    • eslint-plugin: [space-infix-ops] fix no error when right type is function (#​4848) (d74d559)
    Features
    • eslint-plugin: [parameter-properties] add rule to replace no-parameter-properties (#​4622) (88ed9ec)

    v5.20.0

    Compare Source

    Features

    v5.19.0

    Compare Source

    Bug Fixes
    Features
    • eslint-plugin: [unified-signatures] add ignoreDifferentlyNamedParameters option (#​4659) (fdf95e0)
    • eslint-plugin: add support for valid number and bigint intersections in restrict-plus-operands rule (#​4795) (19c600a)

    v5.18.0

    Compare Source

    Bug Fixes
    Features

    v5.17.0

    Compare Source

    Features
    • eslint-plugin: [no-unused-vars] add destructuredArrayIgnorePattern options (#​4748) (6f8db8b)

    v5.16.0

    Compare Source

    Bug Fixes
    • eslint-plugin: [consistent-type-assertions] enforce assertionStyle for const assertions (#​4685) (8ec05be)
    Features
    • eslint-plugin: [prefer-optional-chain] support logical with empty object (#​4430) (d21cfe0)

    v5.15.0

    Compare Source

    Features

    v5.14.0

    Compare Source

    Bug Fixes
    • eslint-plugin: [naming-convention] cover case that requires quotes (#​4582) (3ea0947)
    • eslint-plugin: [no-misused-promises] factor thenable returning function overload signatures (#​4620) (56a09e9)
    • eslint-plugin: [prefer-readonly-parameter-types] handle class sharp private field and member without throwing error (#​4343) (a65713a)
    • eslint-plugin: [return-await] correct autofixer in binary expression (#​4401) (5fa2fad)
    Features
    • eslint-plugin: [no-misused-promises] add granular options within checksVoidReturns (#​4623) (1085177)

    v5.13.0

    Compare Source

    Bug Fixes
    • eslint-plugin: [sort-type-union-intersection-members] Wrap the constructorType in parentheses (#​4590) (851bb90)
    Features

    5.12.1 (2022-02-21)

    Bug Fixes
    • eslint-plugin: [no-unnecessary-type-arguments] fix comparison of types (#​4555) (fc3936e)

    v5.12.1

    Compare Source

    Bug Fixes
    • eslint-plugin: [no-unnecessary-type-arguments] fix comparison of types (#​4555) (fc3936e)

    v5.12.0

    Compare Source

    Bug Fixes
    • eslint-plugin: [init-declarations] fix nested namespace (#​4544) (fe910e6)
    • eslint-plugin: [no-unnecessary-type-arguments] Use Symbol to check if it's the same type (#​4543) (5b7d8df)
    • support nested object deconstructuring with type annotation (#​4548) (4da9278)
    Features

    v5.11.0

    Compare Source

    Bug Fixes
    • eslint-plugin: [no-magic-numbers] fix invalid schema merging (#​4517) (b95f796)
    • eslint-plugin: [non-nullable-type-assertion-style] fix false positive when asserting to a generic type that might be nullish (#​4509) (4209362)
    Features

    5.10.2 (2022-01-31)

    Bug Fixes
    • eslint-plugin: [no-restricted-imports] allow relative type imports with patterns configured (#​4494) (4a6d217)

    5.10.1 (2022-01-24)

    Note: Version bump only for package @​typescript-eslint/eslint-plugin

    v5.10.2

    Compare Source

    Bug Fixes
    • eslint-plugin: [no-restricted-imports] allow relative type imports with patterns configured (#​4494) (4a6d217)

    v5.10.1

    Compare Source

    Note: Version bump only for package @​typescript-eslint/eslint-plugin

    v5.10.0

    Compare Source

    Bug Fixes
    • eslint-plugin: [explicit-function-return-type] support AllowTypedFunctionExpression within AllowHigherOrderFunction (#​4250) (d053cde)
    • eslint-plugin: [no-extra-semi] false negatives when used with eslint 8.3.0 (#​4458) (f4016c2)
    • eslint-plugin: [no-invalid-this] crash when used with eslint 8.7.0 (#​4448) (e56f1e5)
    • eslint-plugin: [no-magic-numbers] handle bigint in class props (#​4411) (c8e650f)
    Features
    • rename experimental-utils to utils and make experimental-utils an alias to the new package (#​4172) (1d55a75)

    5.9.1 (2022-01-10)

    Note: Version bump only for package @​typescript-eslint/eslint-plugin

    v5.9.1

    Compare Source

    Note: Version bump only for package @​typescript-eslint/eslint-plugin

    v5.9.0

    Compare Source

    Features
    • experimental-utils: move isTypeReadonly from eslint-plugin to experimental-utils (#​3658) (a9eb0b9)

    5.8.1 (2021-12-27)

    Bug Fixes
    • eslint-plugin: [consistent-indexed-object-style] do not report for circular references (#​4347) (6edebcd)
    • eslint-plugin: [consistent-type-definitions] correct fixer with declare keyword (#​4334) (0cd911a)
    • eslint-plugin: [padding-line-between-statements] make function overloading is also processed (#​4345) (d31ec26)

    v5.8.1

    Compare Source

    Bug Fixes
    • eslint-plugin: [consistent-indexed-object-style] do not report for circular references (#​4347) (6edebcd)
    • eslint-plugin: [consistent-type-definitions] correct fixer with declare keyword (#​4334) (0cd911a)
    • eslint-plugin: [padding-line-between-statements] make function overloading is also processed (#​4345) (d31ec26)

    v5.8.0

    Compare Source

    Bug Fixes
    • eslint-plugin: [no-implied-eval] improve performance (#​4313) (e344596)
    • eslint-plugin: [padding-line-between-statements] type StatementTypes can't differenciate from variable (#​4270) (bfc4324)
    • eslint-plugin: [strict-boolean-expression] false positive for truthy boolean (#​4275) (72c2e41)
    • eslint-plugin: array-type mark AST_NODE_TYPES.TSBigIntKeyword as simple (#​4274) (74e544e)
    • eslint-plugin: handle method overloading in semi (#​4318) (3b87b49)
    • experimental-utils: support immutable members (#​3844) (3d33a77)
    Features
    • eslint-plugin: [no-throw-literal] add options to to disallow any/unknown (#​4207) (ff0adf9)
    • eslint-plugin: [restrict-plus-operand] add allowAny option (#​4260) (2788545)

    v5.7.0

    Compare Source

    Features
    • eslint-plugin: [consistent-type-exports] support TS4.5 inline export specifiers (#​4236) (be4d976)
    • eslint-plugin: [consistent-type-imports] support TS4.5 inline import specifiers (#​4237) (f61af7c)
    • eslint-plugin: [no-shadow] support TS4.5 inline import specifiers (#​4239) (96b7e8e)

    v5.6.0

    Compare Source

    Features

    v5.5.0

    Compare Source

    Bug Fixes
    Features
    • eslint-plugin: [member-ordering] add option to sort case insensitive (#​3896) (e3533d5)
    • eslint-plugin: array-type distinguish whether readonly or not (#​4066) (314af44)

    v5.4.0

    Compare Source

    Bug Fixes
    • correct issues with circular imports (#​4140) (4c87b24)
    • eslint-plugin: [explicit-member-accessibility] private fields cannot have accessibility modifiers (#​4117) (81b25c1)
    • eslint-plugin: [no-implied-eval] ignore locally declared functions (#​4049) (d97140e)
    • eslint-plugin: check optional chaining for floating promises (#​4096) (d724777)
    Features

    5.3.1 (2021-11-08)

    Note: Version bump only for package @​typescript-eslint/eslint-plugin

    v5.3.1

    Compare Source

    Note: Version bump only for package @​typescript-eslint/eslint-plugin

    v5.3.0

    Compare Source

    Bug Fixes
    • eslint-plugin: ignore private identifiers in explicit-module-boundary-types (#​4046) (80b853d)
    • eslint-plugin: skip seenTypes for unions in isTypeReadonly (#​4043) (6af7ca7)
    Features
    • eslint-plugin: [no-shadow] exclude external type declaration merging (#​3959) (a93cebf)

    v5.2.0

    Compare Source

    Bug Fixes
    Features

    v5.1.0

    Compare Source

    Bug Fixes
    • eslint-plugin: [no-restricted-imports]: report type-only imports properly (#​3996) ([283cdf2](https://togithub.c

    Configuration

    πŸ“… Schedule: Branch creation - "before 3am on the first day of the month" (UTC), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    β™» Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    πŸ‘» Immortal: This PR will be recreated if closed unmerged. Get config help if that's undesired.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    Reviewed by renovate[bot] at 2022-08-01 00:07
  • 14. Added configurable options to optimize CSS

    In the past it was decided to not let consumers "opt in" this behaviour ( seecomment). However, we observe a mismatch between browser and SSR if the variable is not defined in one of those environments and extraction is enabled.

    I set default value of optimizeCss totrue so that existing consumers won't be affected by the change.

    See https://github.com/atlassian-labs/compiled/issues/1263

    Docs have been updated, see PR

    Changes in the Logic in

    • packages/css/src/plugins/normalize-css.ts
    • packages/css/src/transform.ts
    • packages/babel-plugin/src/types.ts
    • packages/babel-plugin/src/class-names/index.ts
    • packages/babel-plugin/src/utils/build-compiled-component.ts
    • packages/babel-plugin/src/utils/build-styled-component.ts
    • packages/babel-plugin/src/utils/transform-css-items.ts
    • packages/webpack-loader/src/compiled-loader.ts
    • packages/webpack-loader/src/types.ts

    Changes in test files to reflect the optimised value which is set by default

    Reviewed by pancaspe87 at 2022-07-15 06:12
  • 15. Add configurable options to optimise CSS

    Is your feature request related to a problem? Please describe. At current Compiled applies additional plugins) to optimise CSS based on the value of process.env.NODE_ENV . However, if the variable is undefined in one of the environment this could cause a mismatch between server and browser if they have different configuration when stylesheet extraction is enabled.

    For example, given margin-top: 32px; this will become margin-top: 2pc; in production mode. Because of these different CSS values, Compiled will generate different CSS classes and cause browser/server not to be on sync

    Reviewed by pancaspe87 at 2022-07-14 00:30
  • 16. Prop filtering on DOM elements does not work

    Describe the bug When passing a prop to a styled component, the props can be forwarded to the DOM element.

    Expected behavior Props should only be forwarded to DOM elements if they are a DOM prop

    Screenshots Screen Shot 2022-07-12 at 3 10 19 PM

    Reviewed by JakeLane at 2022-07-12 23:10
Eth-time - ETH Time - A new NFT collection created to explore new ways of generating NFTs on-chain

ETH Time ETH Time is a new NFT collection created to explore new ways of generat

Jan 25, 2022
A monorepo boilerplate for react web and react native. Uses react-native-web to reduce time invested in making the same components for mobile and web

Monorepo template Get Started Run the following command to install all the dependencies in the right location yarn lerna bootstrap yarn workspace @mar

Jan 9, 2022
Lambda-websocket-client - A real time chat app Built With React.js and WebSocket
Lambda-websocket-client - A real time chat app Built With React.js and WebSocket

Description Source code for the lambda function from the screencast How to build

May 8, 2022
Starter template for Vite with React (TypeScript). Supports Tailwind with CSS-Modules. Jest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.
Starter template for Vite with React (TypeScript). Supports Tailwind with CSS-Modules. Jest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.

Mocking up web app with Vital(speed) Live Demo Features ⚑️ React 17 ?? TypeScript, of course ?? Jest - unitary testing made easy ?? Tailwind with JIT

Jul 30, 2022
I have created a real time currency converter using api in react
I have created a real time currency converter using api in react

React Currency Converter Review ↓ Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the

May 20, 2022
React-Application - The Real time chat application for chatting uisng socket.io
React-Application - The Real time chat application for chatting uisng socket.io

This is the Real time chat application for chatting uisng socket.io

May 9, 2022
This is a react portfolio template build using react, typescript and tailwind css. It help developers and designers to showcase their work

React Portfolio Using Tailwind UI This project include a portfolio template which is built using React and Tailwind CSS. It help developer and designe

Oct 30, 2021
Personal portfolio inspired by VS Code and Github, using React, Context API, html and CSS
Personal portfolio inspired by VS Code and Github, using React, Context API, html and CSS

Personal portfolio inspired by VS Code and Github, using React, Context API, html and CSS

Jun 17, 2022
Tail-kit is a free and open source components and templates kit fully coded with Tailwind css 2.0.
Tail-kit is a free and open source components and templates kit fully coded with Tailwind css 2.0.

Tail-Kit A beautiful and large components and templates kit for TailwindCSS 2.0 Tail-Kit is Free and Open Source. It does not change or add any CSS to

Aug 8, 2022
Start your development with a Free Tailwind CSS and NextJS UI Kit and Admin.
Start your development with a Free Tailwind CSS and NextJS UI Kit and Admin.

Notus NextJS A beautiful UI Kit and Admin for Tailwind CSS and NextJS. Start your development with a Free Tailwind CSS and NextJS UI Kit and Admin. Le

Aug 1, 2022
Boilerplate and Starter for Next JS 12+, Tailwind CSS 3 and TypeScript
Boilerplate and Starter for Next JS 12+, Tailwind CSS 3 and TypeScript

?? Boilerplate and Starter for Next.js, Tailwind CSS and TypeScript ⚑️ Made with developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Jest, Testing Library, Commitlint, VSCode, Netlify, PostCSS, Tailwind CSS.

Jul 27, 2022
Template to create reactjs component library which will help you to create your dream library.

reactjs-library-template Template to create reactjs component library which will help you to create your dream library. How to use Commands to setup e

Dec 25, 2021
Mosaic Lite is a free admin dashboard template built on top of Tailwind CSS and fully coded in React
Mosaic Lite is a free admin dashboard template built on top of Tailwind CSS and fully coded in React

Mosaic Lite is a responsive dashboard template built on top of TailwindCSS and fully coded in React

Aug 6, 2022
Salvia-kit provides beautiful dashboard templates built with Tailwind CSS for React, Next.js, Vue and Nuxt.js
Salvia-kit provides beautiful dashboard templates built with Tailwind CSS for React, Next.js, Vue and Nuxt.js

Salvia-kit provides beautiful dashboard templates built with Tailwind CSS for React, Next.js, Vue and Nuxt.js

Aug 6, 2022
Notus React: Free Tailwind CSS UI Kit and Admin
Notus React: Free Tailwind CSS UI Kit and Admin

Notus React A beautiful UI Kit and Admin for Tailwind CSS and React. Start your development with a Free Tailwind CSS and React UI Kit and Admin. Let N

Jul 30, 2022
A front end project using react js, html and CSS to fetch data from the pokemon API.

A front end project using react js, html and CSS to fetch data from the pokemon API. The web application searches for Pokemon characters and displays their stats and images.

Nov 1, 2021
A universal Javascript starter kit inc. React, Redux, Redux Dev Tools, Universal Redux Router, CSS Modules, hot module reloading, Babel for ES2015+ and ESLint

UniversalJS A universal Javascript starter kit inc. React, Redux, Redux Dev Tools, Universal Redux Router, CSS Modules, hot module reloading, Babel fo

Jul 1, 2020
πŸš€ A web extension starter built with React, Typescript, and Tailwind CSS.
πŸš€ A web extension starter built with React, Typescript, and Tailwind CSS.

A web extension starter, built with React, Typescript, and Tailwind CSS. Build once, and run on multiple browsers: Google Chrome, Mozilla Firefox, Microsoft Edge, and Brave.

Jul 19, 2022
GoSocial Landing Page Clone made with React and CSS

GoSocial Landing Page Clone GoSocial is an app for creators that enables them to build an engaged community and monetize their expertise. On GoSocial,

Mar 31, 2022