diff --git a/CHANGELOG.md b/CHANGELOG.md index 1737ed3..1b516d2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,20 @@ +# [1.8.0](https://github.com/CoCreate-app/CoCreate-css-parser/compare/v1.7.29...v1.8.0) (2023-08-16) + + +### Bug Fixes + +* crud attributes renamed ([4e317ef](https://github.com/CoCreate-app/CoCreate-css-parser/commit/4e317efe622a6a741e7f26bcc26a5f70daf969c0)) +* Remove redundant dependency ([ca37c3a](https://github.com/CoCreate-app/CoCreate-css-parser/commit/ca37c3a9b101cfde1b0f95f16ff8ec5c1a84b76c)) +* replace -target -selector ([345d8af](https://github.com/CoCreate-app/CoCreate-css-parser/commit/345d8af1b8cf67fe98ee2314f52156701991076a)) +* webpack.config and package.json make use of mode=production instead of process.env ([6382cc5](https://github.com/CoCreate-app/CoCreate-css-parser/commit/6382cc56209d43a4b35309ef1c5745baccf3e0f4)) + + +### Features + +* element.setValue and Remove unused import statement and optimize code for joining parsedCSS and linkCSS arrays into a single string with unique values. Also, remove unused code related to saving the linkTag. ([4e0affd](https://github.com/CoCreate-app/CoCreate-css-parser/commit/4e0affd917c4dfd7cab0ae619490dcc2d0fc4a78)) +* getValue function and use element.save() to execute crud save ([d2a289f](https://github.com/CoCreate-app/CoCreate-css-parser/commit/d2a289fad2c17058baa733f2068087ebd334a954)) +* name attribute and variable renamed to key ([3a130e3](https://github.com/CoCreate-app/CoCreate-css-parser/commit/3a130e38f88c23c34ba294023f66732992103d6f)) + ## [1.7.29](https://github.com/CoCreate-app/CoCreate-css-parser/compare/v1.7.28...v1.7.29) (2023-06-14) diff --git a/CoCreate.config.js b/CoCreate.config.js index a87a336..201359d 100644 --- a/CoCreate.config.js +++ b/CoCreate.config.js @@ -4,8 +4,8 @@ module.exports = { "host": "", "sources": [ { - "collection": "files", - "document": { + "array": "files", + "object": { "_id": "637ca39950234ef1671ce312", "name": "index.html", "path": "/docs/css-parser/index.html", diff --git a/demo/atomic-css.html b/demo/atomic-css.html index e283f63..a18d21a 100644 --- a/demo/atomic-css.html +++ b/demo/atomic-css.html @@ -11,10 +11,10 @@ sizes="32x32" href="https://cocreate.app/images/favicon.ico" /> @@ -42,7 +42,7 @@ -
+
@@ -109,7 +109,7 @@

CoCreate helper CSS

+ hover-selector="[href='#css-parser-reference']">

Reference

Reference

+ hover-selector="[href='#css-parser-demo']">

Demo

Demo

@@ -1048,7 +1048,7 @@

Demo

show="#eye-slash" hide="#eye, #demo-preview" toggle="code-height" - toggle-target="#demo-code" + toggle-selector="#demo-code" >

Demo

show="#eye, #demo-preview" hide="#eye-slash" toggle="code-height" - toggle-target="#demo-code" + toggle-selector="#demo-code" >

Demo

 + fullscreen-selector="#playground">
@@ -1101,11 +1101,11 @@

Demo

- - \ No newline at end of file + + + + diff --git a/demo/test.html b/demo/test.html index c3c117a..722f93d 100644 --- a/demo/test.html +++ b/demo/test.html @@ -6,7 +6,7 @@ CoCreateCSS - A utility first, atomic CSS framework @@ -71,7 +71,7 @@

Toggle Darkmode @@ -79,7 +79,7 @@

Toggle Darkmode @@ -91,20 +91,20 @@

scroll="sticky-nav,hide-nav" scroll-up="10" scroll-down="10" - collection="files" - document_id="60395ef42b3ac232657040fd" - name="src"> + array="files" + object="60395ef42b3ac232657040fd" + key="src"> + array="files" + object="603717b07de7fb350ae9fec8" + key="src">
@@ -129,7 +129,7 @@

+ classkey="test"> hehehe
first one
diff --git a/docs/index.html b/docs/index.html index 5996e78..d932b42 100644 --- a/docs/index.html +++ b/docs/index.html @@ -11,10 +11,10 @@ sizes="32x32" href="https://cocreate.app/images/favicon.ico" /> @@ -54,20 +54,20 @@ scroll="sticky-nav,hide-nav" scroll-up="10" scroll-down="10" - collection="files" - document_id="60395ef42b3ac232657040fd" - name="src"> + array="files" + object="60395ef42b3ac232657040fd" + key="src"> + array="files" + object="603717b07de7fb350ae9fec8" + key="src">

CoCreate utility CSS

share-width="700" share-media="https://cdn.cocreate.app/docs/css-parser.png" hover="display:block!important" - hover-target=".social-networks"> + hover-selector=".social-networks"> @@ -1155,11 +1155,11 @@

Demo

- // var copy = document.querySelectorAll(".copy"); + // var copy = object.querySelectorAll(".copy"); // for (const copied of copy) { // copied.onclick = function() { - // document.execCommand("copy"); + // object.execCommand("copy"); // }; // copied.addEventListener("copy", function(event) { // event.preventDefault(); diff --git a/package.json b/package.json index 865210f..4821f34 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@cocreate/css-parser", - "version": "1.7.29", + "version": "1.8.0", "description": "A simple css-parser component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.", "keywords": [ "css-parser", @@ -25,7 +25,7 @@ }, "scripts": { "start": "npx webpack --config webpack.config.js", - "build": "NODE_ENV=production npx webpack --config webpack.config.js", + "build": "npx webpack --mode=production --config webpack.config.js", "dev": "npx webpack --config webpack.config.js --watch", "postinstall": "node -e \"const { execSync } = require('child_process'); try { execSync('coc --version', { stdio: 'ignore' }); } catch (error) { try { execSync('npm install -g @cocreate/cli', { stdio: 'inherit' }); console.log('Installed \"@cocreate/cli\" globally.'); } catch (error) { console.error('Failed to install \"@cocreate/cli\" globally:', error); } }\"" }, @@ -58,8 +58,7 @@ "webpack-log": "^3.0.1" }, "dependencies": { - "@cocreate/crud-client": "^1.21.23", - "@cocreate/local-storage": "^1.7.20", - "@cocreate/observer": "^1.8.18" + "@cocreate/local-storage": "^1.7.21", + "@cocreate/observer": "^1.8.19" } } diff --git a/src/index.js b/src/index.js index 640bd01..cc7685a 100644 --- a/src/index.js +++ b/src/index.js @@ -5,7 +5,6 @@ * SPDX-License-Identifier: MIT ********************************************************************************/ import observer from '@cocreate/observer'; -import crud from '@cocreate/crud-client'; import localStorage from '@cocreate/local-storage'; const themes = ["light", "dark"]; @@ -31,7 +30,7 @@ let parse; function init(linkTag) { if (linkTag) { parse = linkTag.getAttribute('parse'); - + let styleEl = document.createElement("style"); styleEl.setAttribute('component', 'css-parser'); document.head.appendChild(styleEl); @@ -39,19 +38,28 @@ function init(linkTag) { if (parse == undefined) parse = localStorage.getItem('cssParser') - + if (parse == 'true') { parseLinkCSS(); + linkTag.getValue = () => { + + const onlyUnique = (value, index, self) => { + return self.indexOf(value) === index; + }; + // let css = parsedCSS.concat(linkCSS).filter(onlyUnique); + // css.join('\r\n' + return parsedCSS.concat(linkCSS).filter(onlyUnique).join('\r\n') + } let elements = document.querySelectorAll("[class]"); initElements(elements); observerInit(); } } - } - -function initElements (elements) { - for(let element of elements) +} + +function initElements(elements) { + for (let element of elements) initElement(element); addNewRules(); } @@ -88,9 +96,9 @@ function parseLinkCSS() { function parseClassList(classList) { for (let className of classList) { if (classNameList.has(className)) continue; - + if (className.includes('@dark') || className.includes('@light')) { - createThemeRule(className) ; + createThemeRule(className); } else if (className.includes(':')) { if (className.includes('@')) { @@ -117,7 +125,7 @@ function createRule(className) { let property = res[0]; let suffix = parseValue(res[1]); let value = res[1].split("@")[0].replace(/_/g, " "); - + let rule = ""; if (res.length > 2) { for (let i = 0; i < res.length - 2; i++) { @@ -133,17 +141,17 @@ function createRule(className) { function parseValue(value) { return value - .replace(/\./g, "\\.") - .replace(/%/g, "\\%") - .replace(/@/g, "\\@") - .replace(/\(/g, "\\(") - .replace(/\)/g, "\\)") - .replace(/#/g, "\\#") - .replace(/,/g, "\\,") - .replace(/!/g, "\\!") - .replace(/\//g, "\\/") - .replace(/\"/g, "\\\"") - .replace(/\'/g, "\\'"); + .replace(/\./g, "\\.") + .replace(/%/g, "\\%") + .replace(/@/g, "\\@") + .replace(/\(/g, "\\(") + .replace(/\)/g, "\\)") + .replace(/#/g, "\\#") + .replace(/,/g, "\\,") + .replace(/!/g, "\\!") + .replace(/\//g, "\\/") + .replace(/\"/g, "\\\"") + .replace(/\'/g, "\\'"); } function createMediaRule(className) { @@ -175,14 +183,14 @@ function createThemeRule(className) { let classname = className; let pseudo, theme; [className, theme] = className.split('@'); - + if (theme.includes(':')) { theme = theme.split(':'); pseudo = theme; theme = theme[0]; pseudo.shift(); } - + let res = className.split(':'); if (res.length > 2) { console.log('pseudo names need to be added after theme'); @@ -191,7 +199,7 @@ function createThemeRule(className) { let property = res[0]; let suffix = parseValue(res[1]); let value = res[1].replace(/_/g, " "); - + let rule = ""; if (pseudo) { suffix += "\\@" + theme; @@ -260,27 +268,13 @@ function addNewRules() { parsedCSS.splice(low, 0, rule); } if (tempStyleList.length > 0) - save(); + if (linkTag.save) + linkTag.save(); tempStyleList = []; } -let delayTimer; -function save() { - if (linkTag && linkTag.hasAttribute('document_id') && linkTag.getAttribute('save') != 'false') { - clearTimeout(delayTimer); - delayTimer = setTimeout(function() { - const onlyUnique = (value, index, self) => { - return self.indexOf(value) === index; - }; - - let css = parsedCSS.concat(linkCSS).filter(onlyUnique); - crud.save(linkTag, css.join('\r\n')); - }, 3000); - } -} - const observerInit = () => { - + observer.init({ name: "ccCss", observe: ['childList'], @@ -290,22 +284,22 @@ const observerInit = () => { initElements(mutation.addedNodes); } }); - + observer.init({ name: "ccCss", observe: ["attributes"], attributeName: ["class", "className"], callback: mutation => { if (parse != 'false') - initElements([mutation.target]); + initElements([mutation.target]); } }); }; observer.init({ name: "cssParseAddedNode", - observe: ['addedNodes'], - target: 'link[parse], link[save], link[document_id]', + observe: ['addedNodes'], + target: 'link[parse], link[save], link[object]', callback: mutation => { init(mutation.target); } @@ -314,16 +308,15 @@ observer.init({ observer.init({ name: "cssParseattributes", observe: ["attributes"], - attributeName: ["parse", "save", "document_id"], + attributeName: ["parse", "save", "object"], target: 'link', callback: mutation => { - init(mutation.target); + init(mutation.target); } }); -let linkTag = document.querySelector('link[parse], link[collection][document_id][name]'); +let linkTag = document.querySelector('link[parse], link[array][object][key]'); if (linkTag) init(linkTag); -export default {initElements}; - \ No newline at end of file +export default { initElements }; diff --git a/webpack.config.js b/webpack.config.js index 2d8e006..49cf3d5 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,84 +1,90 @@ const path = require("path") const TerserPlugin = require("terser-webpack-plugin") const MiniCssExtractPlugin = require("mini-css-extract-plugin") -let isProduction = process.env.NODE_ENV === "production" const { CleanWebpackPlugin } = require("clean-webpack-plugin") -module.exports = { - entry: { - "CoCreate-css-parser": "./src/index.js", - }, - output: { - path: path.resolve(__dirname, "dist"), - filename: isProduction ? "[name].min.js" : "[name].js", - libraryTarget: "umd", - libraryExport: "default", - library: ["CoCreate", "css-parser"], - globalObject: "this", - }, +module.exports = (env, argv) => { + let isProduction = false + if (argv.mode === 'production') + isProduction = true - plugins: [ - new CleanWebpackPlugin(), - new MiniCssExtractPlugin({ - filename: "[name].css", - }), - ], - // Default mode for Webpack is production. - // Depending on mode Webpack will apply different things - // on final bundle. For now we don't need production's JavaScript - // minifying and other thing so let's set mode to development - mode: isProduction ? "production" : "development", - module: { - rules: [ - { - test: /.js$/, - exclude: /(node_modules)/, - use: { - loader: "babel-loader", - options: { - plugins: ["@babel/plugin-transform-modules-commonjs"], - }, + const config = { + entry: { + "CoCreate-css-parser": "./src/index.js", }, - }, - { - test: /.css$/i, - use: [ - { loader: "style-loader", options: { injectType: "linkTag" } }, - "file-loader", + output: { + path: path.resolve(__dirname, "dist"), + filename: isProduction ? "[name].min.js" : "[name].js", + libraryTarget: "umd", + libraryExport: "default", + library: ["CoCreate", "css-parser"], + globalObject: "this", + }, + + plugins: [ + new CleanWebpackPlugin(), + new MiniCssExtractPlugin({ + filename: "[name].css", + }), ], - }, - ], - }, + // Default mode for Webpack is production. + // Depending on mode Webpack will apply different things + // on final bundle. For now we don't need production's JavaScript + // minifying and other thing so let's set mode to development + mode: isProduction ? "production" : "development", + module: { + rules: [ + { + test: /.js$/, + exclude: /(node_modules)/, + use: { + loader: "babel-loader", + options: { + plugins: ["@babel/plugin-transform-modules-commonjs"], + }, + }, + }, + { + test: /.css$/i, + use: [ + { loader: "style-loader", options: { injectType: "linkTag" } }, + "file-loader", + ], + }, + ], + }, - // add source map - ...(isProduction ? {} : { devtool: "eval-source-map" }), + // add source map + ...(isProduction ? {} : { devtool: "eval-source-map" }), - optimization: { - minimize: true, - minimizer: [ - new TerserPlugin({ - extractComments: true, - // cache: true, - parallel: true, - // sourceMap: true, // Must be set to true if using source-maps in production - terserOptions: { - // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions - // extractComments: 'all', - compress: { - drop_console: true, - }, - }, - }), - ], - splitChunks: { - chunks: "all", - minSize: 200, - // maxSize: 99999, - //minChunks: 1, + optimization: { + minimize: true, + minimizer: [ + new TerserPlugin({ + extractComments: true, + // cache: true, + parallel: true, + // sourceMap: true, // Must be set to true if using source-maps in production + terserOptions: { + // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions + // extractComments: 'all', + compress: { + drop_console: true, + }, + }, + }), + ], + splitChunks: { + chunks: "all", + minSize: 200, + // maxSize: 99999, + //minChunks: 1, - cacheGroups: { - defaultVendors: false, - }, - }, - }, -} + cacheGroups: { + defaultVendors: false, + }, + }, + }, + } + return config +} \ No newline at end of file