Giter Site home page Giter Site logo

jissereitsma / hyva-modules-tailwind-js Goto Github PK

View Code? Open in Web Editor NEW

This project forked from hyva-themes/hyva-modules-tailwind-js

0.0 0.0 0.0 114 KB

Hyvä-themes TailwindCSS utility functions

License: BSD 3-Clause "New" or "Revised" License

JavaScript 100.00%

hyva-modules-tailwind-js's Introduction

Hyvä-Themes node-modules utility

Hyvä-themes TailwindCSS utility functions.

Library module exports:

  • mergeTailwindConfig
    Function to merge view/frontend/tailwind/tailwind.config.js files from modules into the theme tailwind.config.js
    It is intended to be used in a themes' tailwind.config.js file.
  • postcssImportHyvaModules
    Postcss plugin to import view/frontend/tailwind/tailwind-source.css files from modules into a themes' tailwind-source.css
  • hyvaThemesConfig
    The parsed contents of the file app/etc/hyva-themes.json file. This file is generated by the command bin/magento hyva:config:generate
  • hyvaModuleDirs
    An array of absolute paths to Hyvä modules.

How to use

Before using the library, install it inside your Hyvä-Theme folder using

npm install @hyva-themes/hyva-modules

If you are using Hyvä 1.1.14 or newer it will already be included in the package.json file by default.

Merging module tailwind configurations

To use the tailwind config merging, require this module in a themes' tailwind.config.js file and wrap the module.exports value in a call to mergeTailwindConfig() like this:

const hyvaModules = require('@hyva-themes/hyva-modules');
module.exports = hyvaModules.mergeTailwindConfig({
  // theme tailwind config here ...
})

Specifying content (purge) paths

  • How do I specify relative purge paths content paths?
    Specify the paths relative to the view/frontend/tailwind/tailwind.config.js file in the module, for example ../templates/**/*.phtml

  • Do I use the TailwindCSS v2 or v3 purge content structure?
    The script is smart enough to map a modules' purge config structure to the same one that is used in the theme.
    If you don't have any preference, then we suggest you use the v3 structure.

Using require()

When using require with a node library inside a modules' view/frontend/tailwind/tailwind.config.js file, prefix the node module name the global variable themeDirRequire:

const colors = require(`${themeDirRequire}/tailwindcss/colors`);

The global variable themeDirRequire maps to the node_modules/ folder in the theme that is currently being built.

Merging module tailwind CSS

To use the hyva-modules postcss plugin, require this library and add it as the first plugin in the themes' postcss.config.js file. Important: The hyva-modules plugin has to go before the require('postcss-import') plugin!

const { postcssImportHyvaModules } = require('@hyva-themes/hyva-modules');
  module.exports = {
    plugins: [
     postcssImportHyvaModules,
     require('postcss-import'),
     ...other plugins...
 ]
}

Creating a modules' tailwind-source.css file

To declare custom CSS, create a file view/frontend/tailwind/tailwind-source.css in a module. This file will automatically be imported with @import at the end of a themes' tailwind-source.css file.

We recommend only using @import statements in a module tailwind-source.css file, since other modules CSS files might be appended afterwards, and @import statements are only allowed before regular CSS declarations.

The hyvaThemesConfig and hyvaModuleDirs exports

These values are intended to be used in custom build tools and in future utilities.

The hyva-themes.json configuration

This library uses the file app/etc/hyva-themes.json to know which modules might contain tailwind configuration or CSS to merge. This file is generate by the CLI command bin/magento hyva:config:generate.

To add a module to the list, the Magento event hyva_config_generate_before can be used.
This happens automatically for Hyvä compatibility modules that register themselves with the \Hyva\CompatModuleFallback\Model\CompatModuleRegistry.

The bin/magento hyva:config:generate command should be run as part of the build, before npm run build-prod.

License

Hyvä Themes - https://hyva.io
Copyright © Hyvä Themes 2022-present. All rights reserved.
This library is distributed under the BSD-3-Clause license.

See the LICENSE.md file for more information.

hyva-modules-tailwind-js's People

Contributors

grimlink avatar vinai avatar thijsdewitt avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.