Skip to content
Snippets Groups Projects

Add linaria as a CSS library

Add linaria as a CSS library
issue/jsx-3393003:linaria-css into 1.0.x
3 open threads
Merged
Harumi Jangrequested to merge
issue/jsx-3393003:linaria-css into 1.0.x
3 open threads

This PR:

  • Adds linaria as a css library
  • Adds new NodeCardCommon jsx component that replaces node--card-common and node--card-common-alt twig templates
  • Removes npm-watch library and replaces with esbuild's watch feature in watch-react.mjs
  • Replaces React watch and build command with esbuild scripts.
Edited by Harumi Jang

Merge request reports

Loading
Loading

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
  • Alex Bronstein @effulgentsia started a thread on an old version of the diff
    • demo/themes/umami_jsx/app/src/components/content/drupal/NodeCardCommon.jsx 0 → 100644
    14 font-size: 1.424rem;
    15 font-weight: 400;
    16 padding-top: 0.5rem;
    17 `
    18 });
    19 const bundle = node.type[0].target_id;
    20 const articleStyles = css`
    21 display: flex;
    22 flex-direction: column;
    23 width: 100%;
    24 padding: 1rem;
    25 border: 1px solid #fcece7;
    26 background: #fff;
    27 color: red;
    28 `;
    29 const articleClasses = ['node', `node--type-${bundle}`, 'node--promoted', `node--view-mode-${toKebabCase(viewMode)}`, 'view-mode-card', articleStyles];
  • Alex Bronstein @effulgentsia started a thread on an old version of the diff
    • demo/themes/umami_jsx/app/src/components/layout/drupal/Page.jsx
    1 export default function({ page, isFront, node }) {return(
    1 import { createElement, Fragment } from 'react';
    2 export default function Page({ page, isFront, node }) {return(
    • Comment on lines -1 to +2
      E
      Alex Bronstein @effulgentsia
      Maintainer

      The import should be removable after adding esbuildOptions: {jsx: 'automatic'} into the linaria esbuild plugin configuration.

      Is adding a name to the export function required by Linaria? If not, let's not do that in this MR, but we can do it in its own MR if it's just better practice.

    • Harumi Jang
      Harumi Jang @hooroomoo
      Author Maintainer

      @linaria/shaker throws an error without the name in the function but it only errors out on components that use Linaria so NodeCardCommon is the only one that needs it.

      Should I create a separate MR to add the name for the components without Linaria so they're all consistent or can I keep those changes in this MR?

      Edited by Harumi Jang
    • Harumi Jang changed this line in version 4 of the diff

      changed this line in version 4 of the diff

    • Please register or sign in to reply
  • E
    Alex Bronstein @effulgentsia
    Maintainer

    This MR looks really good. I added a bunch of nit comments, but overall it's great to see this working!

  • Harumi Jang added 3 commits

    added 3 commits

    • 451ac627 - Address feedback and also rename jsx component to NodeCard
    • 9ddfea0b - Add classnames library to handle conditional classes elegantly
    • 41c6cf07 - Remove twig templates

    Compare with previous version

  • Harumi Jang
    Harumi Jang @hooroomoo started a thread on commit 9ddfea0b
    • demo/themes/umami_jsx/app/src/components/content/drupal/NodeCard.jsx
    13 14 background: #fff;
    14 15 color: red;
    15 16 `;
    16 const articleClasses = [
    17 const articleClasses = classNames([
  • Harumi Jang added 1 commit

    added 1 commit

    Compare with previous version

  • Alex Bronstein merged

    merged

    • Please register or sign in to reply