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
i suppose 'globby' could help, if it's not "in" the plugin
pgnd
@pgnd

this split/merged config, using globby

webpack.config.js
    ...
    const PATHS = {
        twigs: path.join(__dirname, 'resources/views/templates'),
    };
    const watchPaths = globby.sync([
        `${PATHS.twigs}/**/*`,
    ]);
    const commonConfig = merge([
        parts.Watcher(`${watchPaths}`),
    ...

and

webpack.parts.js
    ...
    const { AddDependencyPlugin } = require('webpack-add-dependency-plugin');
    exports.Watcher = (watchPaths) => ({
        plugins: [
            new AddDependencyPlugin({
                path: watchPaths,
            }),
        ],
    });
    ...

does compile with no errors.
but, any change to *.twig under

`${PATHS.twigs}/**/*`

is not tracked/detected. no webpack rebundle is triggered.
something's still missing :-/

Juho Vepsäläinen
@bebraw
@pgnd a static glob would still miss file additions. i think something more robust might be needed. the plugin itself doesn't do much. it's possible it has broken since webpack 5 (i think i haven't used it there yet)
there's another way that's a bit hacky - you could have an entry point where you import your twig templates
you don't have to do anything with the files. all that would do is to make webpack aware of them
to make it dynamic, you could use a require.context
pgnd
@pgnd
@bebraw I haven't messed with dynami-loading/require.context so far. Taking a look now. Thx.
I generally prefer a simple, single-task plugin for such tasks -- in this case, a 'watch any of these files/paths/globs for changes'. The separation of function/task is easier to manage; the webpack-native integrations can get messy quickly!
the entry point is also an option, functionally. need to make sure the templates don't get bundled into my prod build files ...
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