Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • May 02 2020 14:55
    matteobortolazzo commented #448
  • May 02 2020 05:40
    bebraw commented #448
  • May 01 2020 21:03
    matteobortolazzo commented #448
  • Feb 02 2019 22:45
    danielhamngren opened #448
  • Nov 18 2018 04:43
    McWatt commented #447
  • Sep 27 2018 18:26
    bebraw commented #447
  • Sep 27 2018 17:45
    jordancclive opened #447
  • Mar 13 2018 16:18
    skarlinski commented #446
  • Mar 13 2018 15:33
    bebraw commented #446
  • Mar 13 2018 15:32

    bebraw on master

    fix(language-features): Drop we… Removed redundant spread operat… Merge pull request #446 from sk… and 2 more (compare)

  • Mar 13 2018 15:32

    bebraw on v2.5.13

    (compare)

  • Mar 13 2018 15:32

    bebraw on dev

    chore: Bump version 2.5.13 (compare)

  • Mar 13 2018 15:29

    bebraw on dev

    Removed redundant spread operat… Merge pull request #446 from sk… (compare)

  • Mar 13 2018 15:29
    bebraw closed #446
  • Mar 12 2018 17:50
    skarlinski opened #446
  • Mar 07 2018 14:47

    bebraw on dev

    fix(language-features): Drop we… (compare)

  • Mar 07 2018 14:46

    bebraw on dev

    chore: Thank @skarlinski chore: Bump version 2.5.12 (compare)

  • Feb 26 2018 08:55
    bebraw commented #445
  • Feb 26 2018 08:54

    bebraw on master

    Changed `const` to `let` in es6… Merge pull request #445 from sk… chore: Thank @skarlinski and 2 more (compare)

  • Feb 26 2018 08:54

    bebraw on v2.5.12

    (compare)

pgnd
@pgnd
entry point approach needs a loader for the .twig types; guess a raw-loader, maybe ...
Juho Vepsäläinen
@bebraw
yeah, it should be enabled only for development. i would maybe process through https://www.npmjs.com/package/null-loader
it would be enough as only thing you want to do here is not to crash
pgnd
@pgnd
@bebraw a globby.sync def'd *twig entry point, using null-loader appears to do the trick. no add'l 'webpack-add-dependency-plugin' plugin needed.
Juho Vepsäläinen
@bebraw
cool :+1:
pgnd
@pgnd
thxalot ::wave:: !
Juho Vepsäläinen
@bebraw
i think i'll add a note of the technique to the book the next time i work on it :+1:
pgnd
@pgnd

I'm attempting to import both a function & variable for use in my webpack process flow

_myvars1.scss
    $color_grey_medium: hsl(0, 0%, 70.6%);
    @function hsl-to-rgb($hsl-color) {
        @return mix($hsl-color,$hsl-color);
    }

_myvars2.scss
    @import 'myvars1';
    .test {
        --bs-light-rgb: hsl-to-rgb($color_grey_medium);
    }

with this webpack-merge split config

https://pastebin.com/KFS13BLF

everything 'else' has been working well for quite awhile; webpack'ing without issue.

but, THIS^ attempt @ a function-using-a-variable import fails with

SyntaxError
    precss: ... Could not resolve the variable "$color_grey_medium" within "hsl-to-rgb($color_grey_medium)"

this

precss-import-variables

suggests adding 'postcss-variables-loader' & excludes into the mix ...

So far, my various config add'ns haven't worked &/or break things.
I'm first looking for a SurviveJS book-based clever solution

IS there something "in the book" that addresses this^? &/or an obvious fix, ideally minimally-modding my existing merged/split config?

Juho Vepsäläinen
@bebraw
@pgnd i don't think i have anything specific. you could try to process css without webpack to prove the postcss plugin setup you have works
it could be some kind of a weird ordering issue too
@pgnd fwiw, i have a working variable setup at https://github.com/ReactFinland/site but i haven't touched the config in a long while
if you don't have to support older browsers, then going via CSS variables would be a neat way to solve it
pgnd
@pgnd

@bebraw

Yeah, too many moving parts ... need to de-couple.
rm'ing webpack is always 'fun', as I've got manifests, versioning, etc all wrapped around my workflow; can be challenging to unwind it all.

This shouldn't be this finicky, and should JustWork(tm).
Ideally without having to throw additional plugins (e.g. postcss-variables-loader) at it.

I don't need to worry about older browsers ...

Juho Vepsäläinen
@bebraw
@pgnd ok, i would definitely look into CSS Variables then. the best thing is that you can do theming on top of that with a bit of JS later if you want
also dark mode
pgnd
@pgnd
@bebraw Still need to get a function to consume a var though ... which is what's causing the choke.
Will spin up a test site, and see what workaround I can manage. Thx!
pgnd
@pgnd
@bebraw migrated all my usage to CSS vars. solves the issue, much cleaner. thx 4 the pointer!
Juho Vepsäläinen
@bebraw
cool :+1:
one benefit is that it's not coupled with tooling - it just works
  • you can do theming and dark mode later if you want as i mentioned :)
chamindasiyasinghe
@chamindasiyasinghe
text input field inside the draggable component can't be selected/double click on the text on Firefox. It works fine on other browsers. Are there any alternatives as a workaround. I can simply reproduce the issue using https://codesandbox.io/s/fast-cache-d2ul8?file=/src/Card.tsx:2329-2333.
Juho Vepsäläinen
@bebraw
@chamindasiyasinghe it might be interesting for you to try https://github.com/atlassian/react-beautiful-dnd quickly to see if it's the same. it's possible it's some weird browser limitation
@chamindasiyasinghe check https://github.com/react-dnd/react-dnd/issues/438#issuecomment-605552018 . maybe that's a good workaround
1 reply
pgnd
@pgnd

I've a 'main' webpack entry point, which @imports an external url css (typekit).

In dev mode it DUPLICATES the import; in prod mode (i.e., with add'l minify), it does not.

Reading up @ SurviveJS on use of PurgeCSS @

https://survivejs.com/webpack/styling/eliminating-unused-css/

to "remove unused CSS", I don't think it's for solving this problem ...
I'm not removing UNUSED css -- I'm trying to prevent duplicating USED css.

What's an option for de-duping that output -- in dev mode -- without minifying?

The asset layout is,

assets/js/main.js
  import '../scss/main.scss';
  ...

assets/scss/main.scss
  @use 'base';

assets/scss/base/_index.scss
  @forward 'base0';
  @forward 'typography';

assets/scss/base/_typography.scss
  @charset "utf-8";
  @import url("https://use.typekit.net/xxxxxxx.css");
  ...

in dev mode, with this load config,

exports.loadSCSS = ({ filename, chunkFilename, includePaths }) => {
  const plugin = new MiniCssExtractPlugin({
    filename,
    chunkFilename,
  });
  return {
    module: {
      rules: [
        {
          test: /\.s?[ac]ss$/i,
          use: [
            { loader: 'style-loader',},
            { loader: MiniCssExtractPlugin.loader,
              options: { esModule: false, },
            },
            { loader: 'css-loader',
              options: { sourceMap: true, importLoaders: 2, },
            },
            { loader: 'postcss-loader',
              options: {
                sourceMap: true,
                postcssOptions: {
                  plugins: [
                    'precss',
                    'postcss-import',
                    [ 'postcss-preset-env',
                      { autoprefixer: { cascade: false, flexbox: 'no-2009', grid: false, },},
                    ],
                    '@lipemat/css-mqpacker',
                    'postcss-reporter',
                  ].filter(function (plugin) {
                    return plugin !== null;
                  }),
                },
              },
            },
            { loader: 'sass-loader',
              options: {
                implementation: require('sass'),
                sassOptions: { indentWidth: 4, includePaths, fiber: false, },
                sourceMap: true,
              },
            },
          ],
        },
      ],
    },
    plugins: [
      plugin,
    ],
  };
};

In dev mode, webpack compiles/generates output -> .css, DUPLICATING the typekit css import

public/build/css/main.css
  @import url(https://use.typekit.net/xxxxxxx.css);
  @import url(https://use.typekit.net/xxxxxxx.css);
  @charset "UTF-8";
  ...

If I additionally run it through a minify stage, as in production,

exports.minifySCSS = () => ({
  optimization: {
    minimizer: [
      new CssMinimizerPlugin({
        test: /\.css(\?.*)?$/i,
        parallel: 4,
        sourceMap: true,
        minimizerOptions: {
          preset: [ 'advanced', { discardComments: { removeAll: true, }, }, ],
          plugins: [ [ 'autoprefixer', { remove: false, }, ], ],
        },
      }),
    ],
  },
});

webpack compiles/generates output -> .min..css

@import url(https://use.typekit.net/xxxxxxx.css);header#layout-header{width:100vw}header#layout-header ...

WITHOUT the duplication.

Juho Vepsäläinen
@bebraw
@pgnd can you set up a tiny example i can run and check? i'll have some time next week. i am too busy this week with react finland
i haven't run into the css deduplication problem before so that will require some research
most likely the way i use css is somewhat different to yours
it might even be a bug in webpack itself
assuming you cannot reproduce the issue outside of it