stylify / packages Goto Github PK

• The Rollup.js configuration is slowly becoming unnecessary complex
• The build is slow

const components = {
    'button-{$color}': 'display:block background-color:$color'
}

Dynamically generates component classes depending on used classnames - (button-{blue}, button-{red})

• Mapping nested and dependant files (path to files)
• Pregenerating classes in marked area

• https://caniuse.com/?search=css.supports
• https://developer.mozilla.org/en-US/docs/Web/API/CSS/supports
• Hook - onload, ongenerate
• Compiler internal
• Supports ? => Supports with -prefix- ? => Custom fixes

• 2xl, 3xl
• They are not generated properly.
  @media 2(min-width: 1280px) {.2xl\:width\:calc\

Drop @

stylify-option
/stylify-option

Error message

Improve error message for content option, when the parsing fails

Add screens option

@stylify-screens
  screen: '(min-width: 123px)'
/@stylify-screens

• Split by a comma.
• Merge selectors of each component so no duplicate components are added.

const components = {
 'button, title': 'font-size:24px' // Generates two components button => font-size:24px, title => font-size:24px,
 'title': 'color:blue',
 'button': 'font-weight:bold'
}

The code above should have two components

• button: font-size:24px font-weight:bold
• title: font-size:24px color:blue

• Move rollup builder into the class
• Use in packages
• Remove integrations from packages

Use stylify Bundler to bundle css for profiler

• Remove watch commands and replace them using https://vitejs.dev/

There should be a hook that can check or modifie added css property and vlaue. For example to restrict margin size from 1px or 2px to only 4px, 8px, 12px. It should be included in compiler.

• Using new Function() + return

A new package @stylify/webpack-plugin.

• https://webpack.js.org/contribute/writing-a-plugin/
• For the local testing the playground is necessary like here: https://github.com/stylify/packages/tree/master/packages/bundler/playground
• The plugin should simplify the integration from https://stylify.dev/docs/integrations/webpack.

class StylifyPlugin {
    apply(compiler) {
        // Optional configuration.
        nativePreset.compiler.variables = {
            blue: 'steelblue'
        };

        // Create a new Bundler instance.
        const bundler = new Bundler({
            compiler: nativePreset.compiler,
            watchFiles: compiler.options.watch || false
        });

        // Customize bundles however you want.
        bundler.bundle([
            {
                outputFile: './index.css',
                files: ['./index.html']
            }
        ]);

        // You can change these hooks.
        // Just remember, the Stylify must be initialized before the build.
        compiler.hooks.beforeRun.tapPromise(StylifyPlugin.name, () => {
            return bundler.waitOnBundlesProcessed();
        });
        compiler.hooks.beforeRun.tapPromise(StylifyPlugin.name, () => {
            return bundler.waitOnBundlesProcessed();
        });
    }
}

To:

plugins: [
   new StylifyPlugin({
        // Required
        bundles: [],
        // Optional
        // If is dev => if dev is true, watchFiles will be true in bundler config by default (can be overriden by bundler config)
        // If not set, then try to check for compiler.options.watch otherwise the dev is false
        dev: false
        // Bundler config will override 
        bundler: { }
        // Additional hooks
        hooks: {
                name: callback
        },
        // Function that will be called inside the apply method and the plugin instance will be passed
        beforeApply: (plugin) {}
   })
],

Plugin config will be added into the options variable of the class inside the constructor like here https://stylify.dev/docs/integrations/nextjs.

constructor(options) {
        this.options = {
            ...{ isDev: false },
            ...options
        }
    }

• Just an issue for storing ideas
• Projects are mostly using bundlers like Vite, Webpack, Rollup, Esbuild
• I have no idea for now what it should do and what benefits it would bring ¯\_(ツ)_/¯

• If whole project css size is <= 50 Kb - load all into page, without loading stylify in production
• Otherwise split and load stylify

Inline and self closing elements are not matched correctly and the classes of such element are not rewritten by selectors rewritter.

<code-editor
  class="box-shadow:$shadow1 padding:12px__0 height:70px margin-bottom:12px border-radius:$radius2"
  :defaultCode="variablesDefaultHtmlCode"
  readonly
/>

DefineConfig method for Bundler and NuxtModule for types suggestions.

Hi and thanks for creating the nice Nuxt module 💚 I've checked implementation and there are some areas we could improve:

• By convention, npm package name of nuxt modules is either nuxt-lib, @nuxtjs/lib, @lib/nuxt or lib/nuxt (as an entrypoint). It would be nice if we could rename it at the early stages to @stylify/nuxt. In the future, we might introduce a shortcut in nuxt.config to directly install the module by adding modules: ['stylify']
• Using module builder your module keeps compatible with best practices of Nuxt 3. You can read more about here: https://v3.nuxtjs.org/docs/advanced/modules
• In order to support Nuxt 3 and vite, you can replace webpack loader with an unplugin loader that works perfectly with both webpack and vite/rollup with one implementation.

column-break-inside:avoid and break-inside:avoid collision. It's parsed as break-inside when mangling.

• Use actual stylify.dev project for testing
• Install packages
• Run generate
• Test generated stylify.css file

https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule

The browser input needs to be tested for mutatin observer watch mode. A few classes must be added, and then dthe css can be checked. If the css get's updated, then the mutation observer works.

• https://docs.skypack.dev/package-authors/package-checks#export-map

• When file is processed, there should be a hook that can modifie the bundle config for example add file paths by matching them in a content for Symfony and etc.

• Not only for native preset

• It makes bundles larger
• The classes are not classes
• Naming conventions when using classes are "wierd". Especially for imports
• Private things are not realy private. The same goes for protected
• Classes that has properties is complicated to import in webpack or rollup from node modules. Especially, when they are nested in another package @stylify/nuxt-module uses @stylify/stylify. Needs a transformation before import, otherwise it fails
• Radonly properties are basically constants. However in classes it can be rasigned...
• Reasigment detection (if variable is reasigned or not) is better for let variable type then for class property.
• Also: https://medium.com/javascript-in-plain-english/please-stop-using-classes-in-javascript-and-become-a-better-developer-a185c9fbede1 and https://reactjs.org/docs/hooks-intro.html
• It's simply a mess